/* ============================================================
   Stratavex — Brand tokens (single source of truth)
   Loaded first on every surface. Colors, type, radii, spacing,
   motion. Linked as /tokens.css from every page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Backgrounds (darkest → lightest) ─── */
  --page-bg:        #090e18;
  --bg-primary:     #0D1421;
  --bg-secondary:   #111a2b;
  --bg-card:        #141e30;
  --bg-card-hover:  #182438;

  /* ─── Accent ramp ─── */
  --accent-bright:  #7BBDD6;
  --accent:         #5BA3C0;
  --accent-dim:     #3B82A0;
  --accent-deep:    #1B2A4A;

  /* ─── Text ─── */
  --text-white:     #eef1f6;
  --text-primary:   #D4DCE8;
  --text-secondary: #6B7FA3;
  --text-muted:     #3d5070;

  /* ─── Borders ─── */
  --border:         #1B2A4A;
  --border-light:   #243552;

  /* ─── Alpha tokens (atmospherics) ─── */
  --accent-surface: rgba(91,163,192,0.07);
  --accent-border:  rgba(91,163,192,0.15);
  --nav-bg:         rgba(13,20,33,0.85);
  --nav-bg-scroll:  rgba(13,20,33,0.95);
  --nav-border:     rgba(91,163,192,0.06);
  --bracket-stroke: rgba(59,130,160,0.12);
  --starmap-dot-1:  rgba(91,163,192,0.15);
  --starmap-dot-2:  rgba(91,163,192,0.08);
  --glow-hero:      rgba(91,163,192,0.05);
  --glow-cta:       rgba(91,163,192,0.06);

  /* ─── Radii ─── */
  --radius-xs:      4px;
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --radius-app:     64px;

  /* ─── Spacing (8-pt friendly) ─── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-15: 60px;
  --s-20: 80px; --s-30: 120px; --s-35: 140px;

  /* ─── Type families ─── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ─── Motion ─── */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   0.3s;
  --t-med:    0.4s;
  --t-slow:   0.7s;
  --t-reveal: 0.8s;
}