/* ============================================================================
   IICONIX — Design Tokens
   Decision-intelligence aesthetic: midnight blue-black base, electric azure +
   cyan primaries, controlled violet, warm metallic gold used *sparingly*.
   ========================================================================== */

:root {
  /* --- Backgrounds & surfaces (blue-black, never pure #000) --------------- */
  --bg:            #060810;
  --bg-2:          #080b16;
  --surface:       #0d1120;
  --surface-2:     #11162a;
  --surface-3:     #161d36;
  --overlay:       rgba(6, 8, 16, 0.72);

  /* --- Text -------------------------------------------------------------- */
  --text:          #e9edf7;
  --text-strong:   #ffffff;
  --muted:         #9aa4bd;
  --muted-2:       #6c7690;
  --faint:         #48506a;

  /* --- Brand accents ----------------------------------------------------- */
  --azure:         #3d8bff;   /* electric blue — primary */
  --azure-bright:  #5b9dff;
  --cyan:          #34e3e3;   /* cyan — secondary primary */
  --violet:        #7b6bff;   /* controlled violet */
  --gold:          #cba24e;   /* warm metallic gold — sparing punctuation */

  /* --- Borders ----------------------------------------------------------- */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(61, 139, 255, 0.32);

  /* --- Gradients --------------------------------------------------------- */
  --grad-brand:   linear-gradient(120deg, var(--azure) 0%, var(--cyan) 100%);
  --grad-brand-3: linear-gradient(120deg, var(--violet) 0%, var(--azure) 50%, var(--cyan) 100%);
  --grad-text:    linear-gradient(120deg, #ffffff 0%, #bcd4ff 55%, #7fe6e6 100%);
  --grad-surface: linear-gradient(180deg, rgba(22,29,54,0.6) 0%, rgba(13,17,32,0.6) 100%);
  --grad-radial:  radial-gradient(60% 60% at 50% 0%, rgba(61,139,255,0.18) 0%, transparent 70%);

  /* --- Glow -------------------------------------------------------------- */
  --glow-azure:  0 0 40px -8px rgba(61, 139, 255, 0.55);
  --glow-cyan:   0 0 40px -8px rgba(52, 227, 227, 0.45);
  --glow-soft:   0 0 0 1px rgba(61,139,255,0.15), 0 20px 60px -30px rgba(61,139,255,0.5);

  /* --- Shadows ----------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.75);

  /* --- Radii ------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- Spacing & layout -------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1360px;
  --gutter:         clamp(20px, 5vw, 48px);
  --section-y:      clamp(72px, 10vw, 140px);

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-eyebrow:  0.78rem;
  --fs-body:     1.02rem;
  --fs-lead:     clamp(1.1rem, 1.6vw, 1.32rem);
  --fs-h3:       clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-h2:       clamp(2rem, 4.4vw, 3.2rem);
  --fs-h1:       clamp(2.6rem, 6.4vw, 5rem);
  --fs-display:  clamp(3.2rem, 9vw, 7rem);

  --lh-tight: 1.04;
  --lh-snug:  1.22;
  --lh-body:  1.62;

  /* --- Motion ------------------------------------------------------------ */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  0.18s;
  --dur:       0.34s;
  --dur-slow:  0.6s;

  --nav-h: 74px;
}

/* Respect users who prefer less motion at the token level too. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.001s; --dur: 0.001s; --dur-slow: 0.001s; }
}