/* ============================================================
   Forbys — Design Tokens
   Variables CSS: paleta, tipografía, espaciado, radios, sombras.
   Incluir PRIMERO antes de cualquier otro CSS.
   ============================================================ */

:root {
  /* ── Fondos ─────────────────────────────────────────────── */
  --bg:           #FAFBFC;
  --bg-elev:      #FFFFFF;
  --bg-subtle:    #F1F5F9;
  --bg-hover:     #F8FAFC;

  /* ── Bordes ─────────────────────────────────────────────── */
  --border:       #E2E8F0;
  --border-strong:#CBD5E1;

  /* ── Texto ──────────────────────────────────────────────── */
  --text:         #0F172A;
  --text-muted:   #64748B;
  --text-subtle:  #94A3B8;

  /* ── Primario (azul fintech) ─────────────────────────────── */
  --primary:        #1E40AF;
  --primary-hover:  #1D4ED8;
  --primary-light:  #DBEAFE;
  --primary-text:   #FFFFFF;

  /* ── Estados ────────────────────────────────────────────── */
  --success:        #059669;
  --success-bg:     #D1FAE5;
  --warning:        #D97706;
  --warning-bg:     #FED7AA;
  --danger:         #DC2626;
  --danger-bg:      #FEE2E2;
  --info:           #0891B2;
  --info-bg:        #CFFAFE;

  /* ── Confianza IA ───────────────────────────────────────── */
  --conf-high:    #059669;
  --conf-mid:     #D97706;
  --conf-low:     #DC2626;

  /* ── Sombras ────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);

  /* ── Tipografías ────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ── Radios ─────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Espaciados ─────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Transiciones ───────────────────────────────────────── */
  --transition: 150ms ease;
}

/* ── Dark mode ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #0A0E1A;
  --bg-elev:      #131826;
  --bg-subtle:    #1A2030;
  --bg-hover:     #1F2638;

  --border:       #1F2937;
  --border-strong:#334155;

  --text:         #F1F5F9;
  --text-muted:   #94A3B8;
  --text-subtle:  #64748B;

  --primary:        #3B82F6;
  --primary-hover:  #60A5FA;
  --primary-light:  #1E3A8A;
  --primary-text:   #FFFFFF;

  --success:        #10B981;
  --success-bg:     #064E3B;
  --warning:        #F59E0B;
  --warning-bg:     #78350F;
  --danger:         #EF4444;
  --danger-bg:      #7F1D1D;
  --info:           #06B6D4;
  --info-bg:        #164E63;

  --conf-high:    #10B981;
  --conf-mid:     #F59E0B;
  --conf-low:     #EF4444;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}