/*
  Breakpoints (documented, not stored as custom properties — @media
  conditions can't consume var()). Keep every responsive rule keyed to
  these exact values so layouts never straddle a contradictory state.

  --bp-sm  600px   card grids: 1 -> 2 col
  --bp-md  768px   tablet portrait, .section padding steps up
  --bp-lg  1024px  THE desktop threshold: hero 1<->2 col, nav
                    hamburger<->inline, schematic full<->compact,
                    timeline horizontal<->vertical
  --bp-xl  1280px  comfortable desktop margins
  --bp-2xl 1440px  container caps at 1200px beyond this
*/

:root {
  /* ---- color ---- */
  --void: #07080b;
  --void-rgb: 7, 8, 11;
  --panel: #10131a;
  --panel-rgb: 16, 19, 26;
  --gold: #c6a15b;
  --gold-rgb: 198, 161, 91;
  --champagne: #eee3c8;
  --bronze: #9c8148;
  --bronze-rgb: 156, 129, 72;
  --mist: #8c93a6;
  --bone: #f5f2ea;
  --bone-rgb: 245, 242, 234;

  --gold-foil: linear-gradient(155deg, var(--champagne), var(--gold) 55%, var(--bronze) 100%);

  --hairline: rgba(245, 242, 234, 0.08);
  --hairline-strong: rgba(245, 242, 234, 0.14);
  --hairline-gold: rgba(198, 161, 91, 0.35);
  --panel-glass: rgba(16, 19, 26, 0.55);
  --border-subtle: rgba(198, 161, 91, 0.14);
  --border-hover: rgba(198, 161, 91, 0.55);
  --scrim: rgba(7, 8, 11, 0.72);

  /* ---- type ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-eyebrow: 0.75rem;
  --fs-h1: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
  --fs-h2: clamp(1.8rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-h3: 1.375rem;
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;
  --fs-stat: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;
  --prose-max: 65ch;

  /* ---- spacing (8px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- radius / shadow / blur ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 0 0 1px var(--hairline-gold),
    0 16px 32px -16px rgba(var(--gold-rgb), 0.35);
  --shadow-nav: 0 1px 0 var(--hairline), 0 24px 48px -32px rgba(0, 0, 0, 0.8);
  --blur-panel: 14px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
  --dur-hero-line: 700ms;
  --hero-stagger: 90ms;
  --dur-pulse: 3200ms;

  /* ---- layout ---- */
  --nav-height: 72px;
  --z-nav: 100;
  --z-mobile-panel: 200;
}