/* Design tokens — color, type, space, motion */
:root {
  /* Color */
  --bg: #0a0a0a;
  --bg-2: #131313;
  --bg-3: #1c1c1c;
  --fg: #ededed;
  --fg-muted: #a0a0a0;
  --fg-dim: #6b6b6b;
  --rule: #2a2a2a;
  --accent: #c84b31;
  --accent-hover: #e25b3f;
  --selection-bg: var(--accent);
  --selection-fg: var(--bg);

  /* Type — system stack with cinematic fallbacks; @font-face hooks below */
  --font-display: "RPDisplay", "Didot", "Bodoni 72", "Big Caslon", "Cormorant Garamond", Georgia, serif;
  --font-text: "RPText", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Fluid type scale (clamp(min, fluid, max)) */
  --fs-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.78rem);
  --fs-sm: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --fs-md: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lg: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  --fs-xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-2xl: clamp(2.6rem, 1.8rem + 3.5vw, 4.8rem);
  --fs-3xl: clamp(3.5rem, 2rem + 6vw, 7rem);
  --fs-4xl: clamp(4.5rem, 2.5rem + 9vw, 10.5rem);

  --lh-tight: 0.95;
  --lh-snug: 1.15;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-base: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --max-w: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 64px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 720ms;
  --dur-cine: 1200ms;

  /* Z-index */
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 100;
}

/* Optional self-hosted fonts — drop woff2 files into /assets/fonts/ to enable.
   The site renders fine without them via the cinematic system fallback. */
@font-face {
  font-family: "RPDisplay";
  src: url("../fonts/display.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "RPText";
  src: url("../fonts/text.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}