/* ============================================================
 * IG TECH ADVISORY · BRAND TOKENS (single source of truth)
 *
 *  REPLICA EXACTA de _no-subir/produccion/web/styles.css
 *  Si cambias algo aquí, sincroniza también ahí (y al revés).
 *
 *  Reglas de oro:
 *  · Brand = Navy #0F2A44 (sobrio, serio, "boardroom")
 *  · Accent = Green #22C55E (significa "online / OK / status")
 *  · NUNCA azules eléctricos (#1E5FFF, #5B8CFF, etc.)
 *  · NUNCA verdes ácidos (#C6F432, neón, etc.)
 *
 *  Importar:
 *  <link rel="stylesheet" href="/LN/brand-tokens.css">
 * ============================================================ */

:root {
  /* ============== PRIMARY · NAVY (brand oficial) ============== */
  --color-primary-50:  #EAEDF2;
  --color-primary-100: #C8D0DC;
  --color-primary-200: #9CABBE;
  --color-primary-300: #7187A0;
  --color-primary-400: #4D6483;
  --color-primary-500: #2E4763;
  --color-primary-600: #0F2A44;  /* ⭐ Navy brand */
  --color-primary-700: #0B2138;
  --color-primary-800: #07182A;
  --color-primary-900: #040F1C;
  --color-primary-950: #02060F;

  /* ============== ACCENT · STATUS GREEN ============== */
  --color-accent-50:   #E8FAEE;
  --color-accent-100:  #C7F3D5;
  --color-accent-200:  #95E5AE;
  --color-accent-300:  #5CD387;
  --color-accent-400:  #22C55E;  /* ⭐ Status green */
  --color-accent-500:  #16A34A;
  --color-accent-600:  #15803D;
  --color-accent-700:  #166534;

  /* ============== INK + NEUTRALS ============== */
  --color-ink-soft: #5C6B7A;

  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F4F4F5;
  --color-neutral-200:  #E4E4E7;
  --color-neutral-300:  #D4D4D8;
  --color-neutral-400:  #A1A1AA;
  --color-neutral-500:  #71717A;
  --color-neutral-600:  #52525B;
  --color-neutral-700:  #3F3F46;
  --color-neutral-800:  #27272A;
  --color-neutral-900:  #18181B;
  --color-neutral-950:  #0A0A0A;

  /* ============== SEMANTIC STATUS ============== */
  --color-success-500: #16A34A;
  --color-warning-500: #F59E0B;
  --color-error-500:   #DC2626;
  --color-info-500:    #0EA5E9;

  /* ============== TYPOGRAPHY ============== */
  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --font-size-xs:    0.75rem;
  --font-size-sm:    0.875rem;
  --font-size-base:  1rem;
  --font-size-lg:    1.125rem;
  --font-size-xl:    1.25rem;
  --font-size-2xl:   1.5rem;
  --font-size-3xl:   1.875rem;
  --font-size-4xl:   2.25rem;
  --font-size-5xl:   3rem;
  --font-size-6xl:   3.75rem;
  --font-size-7xl:   4.5rem;
  --font-size-8xl:   6rem;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.12em;

  /* ============== SPACING ============== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ============== RADII ============== */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ============== SHADOWS ============== */
  --shadow-sm: 0 1px 3px 0 rgb(10 10 10 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(10 10 10 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(10 10 10 / 0.08);
  --shadow-xl: 0 20px 25px -5px rgb(10 10 10 / 0.10);
  --shadow-2xl: 0 25px 50px -12px rgb(10 10 10 / 0.18);
  --shadow-glow-primary: 0 0 40px -8px rgb(15 42 68 / 0.45);
  --shadow-glow-accent:  0 0 40px -8px rgb(34 197 94 / 0.55);

  /* ============== SEMANTIC THEME (high-level aliases) ============== */
  --bg:            var(--color-neutral-0);
  --bg-elevated:   var(--color-neutral-50);
  --bg-inverted:   var(--color-neutral-950);
  --text:          var(--color-neutral-950);
  --text-muted:    var(--color-neutral-600);
  --text-inverted: var(--color-neutral-0);
  --border:        var(--color-neutral-200);
  --brand:         var(--color-primary-600);
  --brand-strong:  var(--color-primary-700);
  --accent:        var(--color-accent-400);
}

/* ============================================================
 * QUICK REFERENCE · valores literales más usados
 * ============================================================
 *
 *  Brand navy ............ #0F2A44   (botones, énfasis, titulares)
 *  Brand navy hover ...... #0B2138   (estados :hover)
 *  Accent green .......... #22C55E   (CTAs, status OK, highlights)
 *  Ink soft .............. #5C6B7A   (texto secundario)
 *  Neutral 950 ........... #0A0A0A   (texto principal, dark bg)
 *  Neutral 50 ............ #FAFAFA   (página light)
 *  Neutral 200 ........... #E4E4E7   (separadores, borders)
 *
 *  Fonts:
 *    Display: Inter Tight (h1-h3, hero, números grandes)
 *    Body:    Inter        (párrafos, UI)
 *    Mono:    JetBrains Mono (eyebrows, código, precios)
 *
 * ============================================================ */