/* ══════════════════════════════════════
   DESIGN TOKENS — Tungsten & Grain
   ══════════════════════════════════════ */

@font-face { font-family: 'Cabinet Grotesk'; src: url('/fonts/cabinet-grotesk-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('/fonts/cabinet-grotesk-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* Surfaces — warm near-blacks */
  --bg: #0c0a08;
  --bg-raised: #14110d;
  --bg-elevated: #1c1813;
  --line: rgba(245, 239, 230, 0.08);
  --line-strong: rgba(245, 239, 230, 0.16);

  /* Ink — warm off-whites */
  --ink: #f5efe6;
  --ink-soft: #b0a698;
  --ink-mute: #8a7f6e;

  /* Tungsten accent */
  --amber: #f0a030;
  --amber-bright: #f0b050;
  --amber-dim: rgba(240, 160, 48, 0.12);
  --glow: rgba(240, 160, 48, 0.20);

  /* Type */
  --font-display: 'Cabinet Grotesk', system-ui, sans-serif;
  --font-body: 'General Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.1875rem;
  --fs-xl: clamp(1.5rem, 3vw, 2rem);
  --fs-2xl: clamp(2rem, 4.5vw, 3rem);
  --fs-3xl: clamp(2.75rem, 6.5vw, 4.5rem);
  --fs-hero: clamp(3rem, 8.5vw, 6rem);

  --track-caps: 0.14em;
  --track-tight: -0.025em;

  /* Space (8px base) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 1rem; --sp-4: 1.5rem;
  --sp-5: 2rem; --sp-6: 3rem; --sp-7: 5rem; --sp-8: 8rem;

  /* Shape & motion */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --shadow-sheet: 0 18px 50px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms; --t-med: 350ms; --t-slow: 650ms;

  --max-w: 1160px;
  --header-h: 68px;
}