/* ============================================================
   EQUIT — DESIGN TOKENS (fuente única de verdad)
   Compartido por landing.html (WEB) y app-web.html (APP).
   Filosofía: Editorial / Swiss fintech — navy + lima, alto
   contraste, labels mono. Un solo acento de marca (lima).
   No hardcodear hex en los archivos: referenciar estas vars.
   ============================================================ */

:root {
  /* ---------- PRIMITIVES ---------- */
  /* Navy scale (deep → soft) */
  --navy-900: #001530;   /* marca / texto principal / superficie spotlight */
  --navy-800: #0A1428;
  --navy-700: #0F1C35;
  --navy-600: #1B2A4A;
  --navy-500: #33415C;
  --navy-400: #5B6472;   /* texto secundario sobre claro */

  /* Lime (acento ÚNICO de marca) */
  --lime-500: #dbff00;   /* acento base */
  --lime-600: #cbf000;   /* hover del acento */

  /* Neutrals (base editorial clara) */
  --paper:    #fcfcfb;   /* fondo de página */
  --surface:  #ffffff;   /* tarjetas / superficies elevadas */
  --well:     #f4f7fb;   /* inputs / pozos */
  --border:   #e5e5e0;   /* bordes por defecto */
  --border-2: #e3eaf3;   /* bordes sutiles (inputs) */
  --hairline: #eef2f7;   /* separadores */
  --white:    #ffffff;

  /* ---------- SEMANTIC ---------- */
  --color-bg:              var(--paper);
  --color-bg-elevated:     var(--surface);
  --color-bg-well:         var(--well);
  --color-bg-spotlight:    var(--navy-900);  /* tarjetas oscuras intencionales (Score, hero) */

  --color-text:            var(--navy-900);
  --color-text-soft:       var(--navy-400);
  --color-text-mute:       #94a3b8;
  --color-text-inverse:    var(--white);

  --color-border:          var(--border);
  --color-border-soft:     var(--border-2);
  --color-focus:           var(--navy-900);

  --color-accent:          var(--lime-500);
  --color-accent-hover:    var(--lime-600);
  --color-accent-ink:      var(--navy-900);  /* texto sobre lima */

  /* Estados (mínimos, no compiten con la marca) */
  --color-success:         #15803d;
  --color-danger:          #dc2626;

  /* ---------- BANDAS DE RESULTADO (feedback de desempeño, semántico) ----------
     Escala semáforo malo→bueno. Eje independiente del acento de marca (lima):
     comunica la CALIDAD del plan del usuario, no la marca. */
  --result-critical:  #EF4444;   /* Crítico  (<500) — rojo */
  --result-warn:      #F59E0B;   /* Mejorable(<620) — ámbar/amarillo */
  --result-good:      #84CC16;   /* Bueno    (<720) — lima-verde */
  --result-excellent: #22C55E;   /* Excelente(≥720) — verde */

  /* ---------- CATEGORÍAS DE PRESUPUESTO (aplanadas a navy/lima) ---------- */
  /* Escala monocroma: distinguibles sin introducir colores de marca extra */
  --cat-income:   var(--navy-900);   /* ingresos */
  --cat-expense:  var(--navy-600);   /* gastos */
  --cat-savings:  var(--lime-500);   /* ahorro (destacado) */
  --cat-fund:     var(--navy-500);   /* fondo de emergencia */

  /* ---------- FIRMA NOA (excepción intencional: superficie IA) ---------- */
  --noa-cyan:        #6fb6ff;
  --noa-cyan-spark:  #dff2ff;
  --noa-violet:      #a86bff;
  --noa-violet-spark:#e4c9ff;
  --noa-halo:        #6f86ff;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", monospace;

  --fs-xs: 11px;  --fs-sm: 13px;  --fs-base: 15px; --fs-md: 17px;
  --fs-lg: 20px;  --fs-xl: 24px;  --fs-2xl: 32px;  --fs-3xl: 44px; --fs-hero: 64px;

  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.15; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --ls-tight: -0.03em; --ls-normal: 0; --ls-wide: 0.16em; /* labels mono uppercase */

  /* ---------- SPACING (base 4px) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* ---------- RADIUS ---------- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px;

  /* ---------- SHADOW ---------- */
  --shadow-sm: 0 1px 2px rgba(0,21,48,0.06);
  --shadow-md: 0 6px 20px rgba(0,21,48,0.08);
  --shadow-lg: 0 20px 50px rgba(0,21,48,0.12);
  --shadow-focus: 0 0 0 3px rgba(219,255,0,0.45);

  /* ---------- MOTION ---------- */
  --dur-fast: 150ms; --dur-normal: 250ms; --dur-slow: 400ms;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);

  /* ---------- LAYOUT ---------- */
  --w-content: 680px; --w-app: 1200px; --w-page: 1360px;
  --bp-sm: 375px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
}

/* ============================================================
   COMPONENT TOKENS — clases reutilizables (web + app)
   ============================================================ */

/* Botón primario (acción de marca) */
.eq-btn {
  font-family: var(--font-body); font-weight: var(--fw-bold);
  background: var(--color-accent); color: var(--color-accent-ink);
  border: none; border-radius: var(--radius-md);
  padding: 12px 22px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.eq-btn:hover  { background: var(--color-accent-hover); }
.eq-btn:active { transform: scale(0.97); }

/* Botón secundario (navy sólido) */
.eq-btn-navy {
  font-family: var(--font-body); font-weight: var(--fw-bold);
  background: var(--navy-900); color: var(--white);
  border: none; border-radius: var(--radius-md);
  padding: 12px 22px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.eq-btn-navy:hover  { background: var(--navy-700); }
.eq-btn-navy:active { transform: scale(0.97); }

/* Tarjeta */
.eq-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.eq-card-spotlight {           /* tarjeta oscura intencional (Score / hero) */
  background: var(--color-bg-spotlight);
  color: var(--white);
  border-radius: var(--radius-lg);
}

/* Pill */
.eq-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 6px 12px; border-radius: var(--radius-full);
}
.eq-pill-accent { background: rgba(219,255,0,0.15); color: var(--lime-500); border: 1px solid rgba(219,255,0,0.35); }

/* Label mono uppercase (kicker) */
.eq-label {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: var(--ls-wide); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); color: var(--color-text-soft);
}

/* ============================================================
   DARK MODE (para superficies spotlight / futuro toggle)
   ============================================================ */
[data-theme="dark"] {
  --color-bg:          var(--navy-900);
  --color-bg-elevated: var(--navy-800);
  --color-bg-well:     var(--navy-700);
  --color-text:        #eef2f7;
  --color-text-soft:   #9fb0c4;
  --color-border:      rgba(255,255,255,0.10);
  --color-border-soft: rgba(255,255,255,0.08);
}