:root {
  /* --- Canvas --- */
  --bg: #0C0C0C;
  --surface: #141414;
  --surface-2: #1A1A1A;
  --surface-hi: #222222;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* --- Ink - pure white (pairs with brand sky blue) --- */
  --ink: #FFFFFF;
  --ink-90: rgba(255, 255, 255, 0.90);
  --ink-70: rgba(255, 255, 255, 0.70);
  --ink-50: rgba(255, 255, 255, 0.50);
  --ink-30: rgba(255, 255, 255, 0.30);

  /* --- Accent - Nate R Media brand sky blue (from favicon) --- */
  --accent: #B9E5FF;                       /* primary - pale sky blue */
  --accent-hot: #7CC5EF;                   /* deeper cyan for hover */
  --accent-deep: #1C6FA8;                  /* deep companion cyan for contrast accents */
  --accent-dim: rgba(185, 229, 255, 0.18);
  --accent-ring: rgba(185, 229, 255, 0.45);
  --accent-wash: rgba(185, 229, 255, 0.08);

  /* Brand light surface - use sparingly as a featured-band background */
  --brand-light: #B9E5FF;
  --brand-ink-on-light: #0C0C0C;

  /* Secondary accent retained for occasional game-day red flags */
  --accent-alt: #C8102E;

  /* --- Type --- */
  --font-display: "Fraunces", "Canela", "Cheltenham", Georgia, serif;
  --font-ui: "Inter Tight", "Söhne", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mark: "Anton", "Druk Condensed", "Oswald", Impact, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale - clamped to viewport with editorial amplitude */
  --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
  --fs-sm: clamp(0.82rem, 0.78rem + 0.15vw, 0.92rem);
  --fs-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
  --fs-md: clamp(1.12rem, 1.06rem + 0.30vw, 1.30rem);
  --fs-lg: clamp(1.40rem, 1.20rem + 0.80vw, 2.00rem);
  --fs-xl: clamp(2.00rem, 1.50rem + 2.00vw, 3.50rem);
  --fs-2xl: clamp(2.80rem, 2.00rem + 3.50vw, 5.50rem);
  --fs-3xl: clamp(4.00rem, 2.50rem + 6.00vw, 8.50rem);
  --fs-hero: clamp(3.50rem, 2.00rem + 8.00vw, 10.00rem);

  /* Leading */
  --lh-tight: 0.95;
  --lh-display: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.55;
  --lh-loose: 1.70;

  /* Tracking */
  --tr-tight: -0.03em;
  --tr-display: -0.02em;
  --tr-body: -0.005em;
  --tr-caps: 0.14em;
  --tr-meta: 0.06em;

  /* --- Space --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* Gutter / rail */
  --rail: clamp(1rem, 4vw, 3rem);
  --max-w: 1680px;
  --max-w-read: 68ch;

  /* --- Elevation / radius --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --shadow-glow: 0 0 0 1px var(--line-strong), 0 20px 60px -20px rgba(0, 0, 0, 0.5);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 420ms;
  --dur-4: 680ms;
  --dur-5: 1100ms;

  /* Grain overlay */
  --grain-opacity: 0.035;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms;
  }
}