/* StageCockpit design tokens — the source of truth for every visual value.
 *
 * Rules:
 *   - styles.css must not contain literal colours, type sizes, spacing, radii,
 *     shadows, tracking, leading, z-index or transitions. Change them here.
 *   - Layout geometry (element widths/heights, transforms) stays in styles.css;
 *     those are one-off measurements, not shared design decisions.
 *   - Verify with: npm run check-tokens
 *   - Known gap: the 980px nav breakpoint is repeated in three @media
 *     preludes and in main.js. CSS variables are not valid in @media
 *     conditions, so that value cannot be tokenised without a build step.
 */

:root {
  /* --- Base hues --- */
  /* the only place an actual colour value exists; every variant derives from these */
  --amber-rgb: 255, 204, 0;
  --bg-rgb: 7, 9, 11;
  --black-rgb: 0, 0, 0;
  --cyan-rgb: 118, 199, 255;
  --green-rgb: 115, 217, 159;
  --surface-dark-rgb: 11, 11, 12;
  --white-rgb: 255, 255, 255;

  /* --- Alpha scale --- */
  /* snapped from 31 ad-hoc opacities, max shift 0.010 */
  --alpha-1: 0.022;
  --alpha-2: 0.05;
  --alpha-3: 0.08;
  --alpha-4: 0.11;
  --alpha-5: 0.15;
  --alpha-6: 0.18;
  --alpha-7: 0.21;
  --alpha-8: 0.24;
  --alpha-9: 0.26;
  --alpha-10: 0.28;
  --alpha-11: 0.35;
  --alpha-12: 0.42;
  --alpha-13: 0.44;
  --alpha-14: 0.52;
  --alpha-15: 0.57;
  --alpha-16: 0.72;
  --alpha-17: 0.81;
  --alpha-18: 0.88;
  --alpha-19: 0.9;
  --alpha-20: 0.92;
  --alpha-21: 0.98;
  /* --- Colour --- */
  --black: rgb(var(--black-rgb));
  --bg: rgb(var(--bg-rgb));
  --bg-2: #0f1114;
  --surface-alt: #111214;
  --surface-dark: rgb(var(--surface-dark-rgb));
  --surface-darker: #0f0f10;
  --panel: rgba(18, 18, 18, 0.92);
  --panel-strong: rgba(12, 12, 12, 0.98);
  --panel-frost: rgba(var(--surface-dark-rgb), var(--alpha-15));
  --panel-soft: rgba(var(--white-rgb), var(--alpha-1));
  --line: rgba(var(--white-rgb), var(--alpha-3));
  --line-soft: rgba(var(--white-rgb), var(--alpha-2));
  --line-accent-subtle: rgba(var(--amber-rgb), var(--alpha-7));
  --line-accent-mid: rgba(var(--amber-rgb), var(--alpha-8));
  --line-accent-bright: rgba(var(--amber-rgb), var(--alpha-11));
  --line-accent: rgba(var(--amber-rgb), var(--alpha-12));
  --line-accent-soft: rgba(var(--amber-rgb), var(--alpha-10));
  --line-accent-strong: rgba(var(--amber-rgb), var(--alpha-19));
  --text: #d8d8dc;
  --text-strong: #f4f4f4;
  --text-cool: #dce2eb;
  --text-soft: #d0d4da;
  --text-muted-strong: rgba(var(--white-rgb), var(--alpha-14));
  --text-dim: rgba(var(--white-rgb), var(--alpha-15));
  --muted: #a4a4a4;
  --amber: rgb(var(--amber-rgb));
  --amber-text: #ffe187;
  --amber-tint: rgba(var(--amber-rgb), var(--alpha-3));
  --amber-text-soft: rgba(var(--amber-rgb), var(--alpha-16));
  --amber-glow-soft: rgba(var(--amber-rgb), var(--alpha-4));
  --amber-glow-strong: rgba(var(--amber-rgb), var(--alpha-6));
  --amber-soft: rgba(var(--amber-rgb), var(--alpha-5));
  --cyan: rgb(var(--cyan-rgb));
  --cyan-soft: rgba(var(--cyan-rgb), var(--alpha-3));
  --green: rgb(var(--green-rgb));
  --green-soft: rgba(var(--green-rgb), var(--alpha-5));
  --danger: #ff7d68;
  --white-10: rgba(var(--white-rgb), var(--alpha-4));
  --white-16: rgba(var(--white-rgb), var(--alpha-5));
  --white-24: rgba(var(--white-rgb), var(--alpha-8));
  --black-20: rgba(var(--black-rgb), var(--alpha-7));
  --black-24: rgba(var(--black-rgb), var(--alpha-8));
  --black-26: rgba(var(--black-rgb), var(--alpha-9));
  --black-28: rgba(var(--black-rgb), var(--alpha-10));
  --black-34: rgba(var(--black-rgb), var(--alpha-11));
  --black-42: rgba(var(--black-rgb), var(--alpha-12));
  --black-44: rgba(var(--black-rgb), var(--alpha-13));
  --black-56: rgba(var(--black-rgb), var(--alpha-15));
  --black-72: rgba(var(--black-rgb), var(--alpha-16));
  --black-82: rgba(var(--black-rgb), var(--alpha-17));
  --black-88: rgba(var(--black-rgb), var(--alpha-18));
  --metal-top: rgba(20, 21, 24, 0.98);
  --metal-bottom: rgba(9, 10, 12, 0.98);
  --overlay-backdrop: rgba(var(--bg-rgb), var(--alpha-16));
  --overlay-backdrop-hover: rgba(var(--bg-rgb), var(--alpha-17));
  --nav-section-offset: 112px;
  --hero-overlay-offset: clamp(104px, 14vh, 180px);
  --container-main: 1280px;
  --container-narrow: 1040px;
  --container-hero: 980px;
  --display: "Barlow Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --body: "Lato", "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;

  /* --- Type scale --- */
  /* 0.05rem grid; snapped from 29 ad-hoc sizes, max shift 0.80px */
  --text-3xs: 0.75rem;
  --text-2xs: 0.8rem;
  --text-xs: 0.85rem;
  --text-sm: 0.9rem;
  --text-md: 0.95rem;
  --text-base: 1.0rem;
  --text-lg: 1.05rem;
  --text-xl: 1.1rem;
  --text-2xl: 1.2rem;
  --text-3xl: 1.3rem;
  --text-4xl: 1.45rem;
  --text-5xl: 1.5rem;
  --text-6xl: 1.7rem;
  --text-7xl: 1.9rem;

  /* --- Fluid type --- */
  /* responsive headings, values unchanged */
  --text-fluid-1: clamp(0.94rem, 1.8vw, 1.14rem);
  --text-fluid-2: clamp(0.95rem, 1.2vw, 1.1rem);
  --text-fluid-3: clamp(0.98rem, 1.3vw, 1.08rem);
  --text-fluid-4: clamp(1.02rem, 1.28vw, 1.18rem);
  --text-fluid-5: clamp(1.4rem, 2vw, 2rem);
  --text-fluid-6: clamp(1.76rem, 7vw, 2.4rem);
  --text-fluid-7: clamp(1.9rem, 11vw, 2.7rem);
  --text-fluid-8: clamp(2.1rem, 10vw, 3.2rem);
  --text-fluid-9: clamp(2.4rem, 13vw, 3.5rem);
  --text-fluid-10: clamp(2.6rem, 5vw, 4.2rem);
  --text-fluid-11: clamp(2.6rem, 7.6vw, 5.9rem);
  --text-fluid-12: clamp(2rem, 4vw, 3.2rem);
  --text-fluid-13: clamp(3rem, 11vw, 4.6rem);
  --text-fluid-14: clamp(3rem, 6vw, 5rem);
  --text-fluid-15: clamp(4.1rem, 7.2vw, 6.1rem);

  /* --- Semantic type sizes --- */
  --kicker-font-size: 0.82rem;
  --section-kicker-font-size: 1.38rem;
  --section-title-size: clamp(2.5rem, 5.4vw, 4.25rem);
  --section-copy-size: clamp(1.08rem, 1.35vw, 1.24rem);
  --section-card-title-size: 1.52rem;

  /* --- Leading --- */
  --leading-1: 0.9;
  --leading-2: 1.1;
  --leading-3: 1.2;
  --leading-4: 1.4;
  --leading-5: 1.5;
  --leading-6: 1.6;
  --leading-7: 1.7;
  --leading-8: 0.92;
  --leading-9: 0.94;
  --leading-10: 0.96;
  --leading-11: 0.98;
  --leading-12: 1.02;
  --leading-13: 1.05;
  --leading-14: 1.08;
  --leading-15: 1.12;
  --leading-16: 1.35;
  --leading-17: 1.58;
  --leading-18: 1.62;
  --leading-19: 1.65;
  --leading-20: 1.68;
  --leading-21: 1.75;

  /* --- Tracking --- */
  --tracking-1: 0.1em;
  --tracking-2: 0.04em;
  --tracking-3: 0.05em;
  --tracking-4: 0.06em;
  --tracking-5: 0.08em;
  --tracking-6: 0.12em;
  --tracking-7: 0.14em;
  --tracking-8: 0.18em;
  --tracking-9: -0.02em;
  --tracking-10: -0.03em;
  --tracking-11: -0.05em;

  /* --- Spacing --- */
  /* 4px grid; snapped from 38 ad-hoc values, max shift 2px */
  --space-0: 0px;
  --space-px: 1px;
  --space-2px: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;
  --space-19: 76px;
  --space-22: 88px;
  --space-24: 96px;
  --space-26: 104px;
  --space-27: 108px;
  --space-30: 120px;
  --space-31: 124px;
  --space-35: 140px;

  /* --- Section spacing --- */
  --space-section-sm: 24px;
  --space-section-md: 48px;
  --space-section-lg: 86px;

  /* --- Radius --- */
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-xs: 14px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* --- Fluid radius --- */
  --radius-fluid-1: clamp(16px, 1.4vw, 20px);
  --radius-fluid-2: clamp(18px, 5vw, 24px);
  --radius-fluid-3: clamp(22px, 2vw, 30px);

  /* --- Shadow --- */
  --shadow: 0 28px 80px var(--black-42);

  /* --- Z-index --- */
  --z-1: 2;
  --z-2: 3;
  --z-3: 4;
  --z-4: -1;
  --z-5: -2;
  --z-6: 22;
  --z-7: 80;

  /* --- Transition --- */
  --transition-1: filter 260ms ease;
  --transition-2: opacity 180ms ease;
  --transition-3: opacity 220ms ease;
  --transition-4: opacity 1000ms ease;
  --transition-5: opacity 180ms ease, transform 180ms ease;
  --transition-6: opacity 200ms ease, transform 200ms ease;
  --transition-7: transform 180ms ease, opacity 180ms ease;
  --transition-8: background-color 180ms ease, backdrop-filter 180ms ease;
  --transition-9: color 160ms ease, border-color 160ms ease, background 160ms ease;
  --transition-10: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  --transition-11: filter 260ms ease, transform 4200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-12: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  --transition-13: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
  --transition-14: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
  --transition-15: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  --transition-16: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 220ms ease;
}