/* ===== DESIGN TOKENS =====
   Loaded before style.css on every page. Nothing here paints anything on its
   own — it only defines the vocabulary the rest of the CSS speaks. */

/* ---- Typography: self-hosted variable fonts ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Backdrop / depth planes ---- */
  --bg-void: #08080f;
  --backdrop-gradient: linear-gradient(160deg, #0b0b14 0%, #171733 32%, #0a2438 62%, #101026 100%);

  /* ---- Surfaces (translucent; they sit over the aurora) ---- */
  --surface-1: rgba(20, 23, 42, 0.55);
  --surface-2: rgba(28, 32, 56, 0.78);
  --surface-3: rgba(38, 43, 76, 0.88);
  --surface-glass: rgba(15, 17, 30, 0.8);
  --surface-well: rgba(6, 7, 16, 0.42);
  /* Large panels: opaque enough to read as glass without a backdrop-filter,
     which would re-blur the backdrop on every scroll frame. */
  --surface-panel: rgba(24, 28, 50, 0.9);
  --blur-glass: 20px;
  --blur-chrome: 10px;

  /* ---- Borders ---- */
  --border-hairline: rgba(255, 255, 255, 0.07);
  --border-soft: #2a2a4a;
  --border-strong: #4a4a8a;
  --border-accent: rgba(var(--accent-rgb), 0.25);
  --border-accent-hi: rgba(var(--accent-rgb), 0.55);

  /* ---- Brand ---- */
  --accent-rgb: 107, 201, 255;
  --accent: #6bc9ff;
  --accent-deep: #4a9eff;
  --accent-ink: #09182e;
  --violet-rgb: 167, 139, 250;
  --violet: #a78bfa;
  --amber-rgb: 255, 179, 71;
  --amber: #ffb347;
  --purple-rgb: 192, 132, 252;
  --purple: #c084fc;
  --success: #00ff88;
  --danger: #ff3b3b;
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);
  --grad-accent-fill: linear-gradient(135deg, rgba(var(--accent-rgb), 0.96) 0%, rgba(74, 158, 255, 0.95) 100%);

  /* ---- Text ---- */
  --text-strong: #ffffff;
  --text: #e0e6f7;
  --text-muted: #b3c6e0;
  --text-dim: #8a9ac0;
  --text-on-accent: #181a2a;

  /* ---- Radius ---- */
  --r-xs: 0.5rem;
  --r-sm: 0.8rem;
  --r-md: 1.2rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  /* ---- Space (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;
  --sp-12: 8rem;

  /* ---- Layout rhythm ---- */
  --section-py: clamp(4.5rem, 9vw, 8.5rem);
  --section-py-tight: clamp(3rem, 6vw, 5.5rem);
  --section-py-loose: clamp(6rem, 12vw, 11rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --w-xs: 640px;
  --w-sm: 780px;
  --w-md: 960px;
  --w-lg: 1140px;
  --w-xl: 1360px;
  --measure: 62ch;

  /* ---- Elevation ---- */
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --e-2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --e-3: 0 12px 32px rgba(3, 10, 28, 0.45);
  --e-4: 0 24px 64px rgba(0, 0, 0, 0.55);
  --glow-accent: 0 0 24px rgba(var(--accent-rgb), 0.35);
  --glow-accent-hi: 0 0 40px rgba(var(--accent-rgb), 0.5);
  --focus-ring: 0 0 0 2px #0d0d1a, 0 0 0 4px rgba(var(--accent-rgb), 0.85);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.16s;
  --dur-2: 0.24s;
  --dur-3: 0.4s;
  --dur-4: 0.7s;
  --dur-5: 0.9s;

  /* ---- Z-index scale (documents the de-facto values already in use) ---- */
  --z-backdrop: -1;
  --z-aurora: 0;
  --z-stars: 1;
  --z-content: 2;
  --z-flight: 90;
  --z-fab: 95;
  --z-navbar: 100;
  --z-navpill: 101;
  --z-progress: 1000;

  /* ---- Type families ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  /* ---- Fluid type scale ---- */
  --step--2: clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.24vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.34vw, 1.41rem);
  --step-2: clamp(1.44rem, 1.34rem + 0.49vw, 1.76rem);
  --step-3: clamp(1.73rem, 1.58rem + 0.72vw, 2.2rem);
  --step-4: clamp(2.07rem, 1.85rem + 1.08vw, 2.75rem);
  --step-5: clamp(2.49rem, 2.15rem + 1.65vw, 3.43rem);
  --step-6: clamp(2.99rem, 2.44rem + 2.66vw, 4.6rem);

  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.18em;

  /* ---- Per-section theming hook; each <section> overrides these ---- */
  --section-glow: var(--accent);
  --section-glow-rgb: var(--accent-rgb);
}