/* ============================================================
   DESIGN TOKENS — single source of truth
   ------------------------------------------------------------
   This file is the ONLY place where we define colors,
   typography, spacing, radii, etc. Every page (index,
   design-system, any future one) links it BEFORE its own CSS.
   A change here propagates everywhere automatically.
   ============================================================ */
:root {
  /* --- color: dark, editorial palette aligned with the hero video --- */
  --bg:          #0c0809;
  --bg-elev:     #161012;
  --bg-elev-2:   #1f1619;
  --fg:          #f5f1ef;
  --muted:       rgba(245, 241, 239, 0.62);
  --faint:       rgba(245, 241, 239, 0.10);
  --accent:      #ff2d72;
  --accent-hover:#ff447f;
  --accent-soft: rgba(255, 45, 114, 0.14);

  /* --- type: families --- */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- type: scale (fluid) --- */
  --fs-display: clamp(2.4rem, 6.5vw, 5.5rem);
  --fs-h1:      clamp(2.6rem, 7vw, 6rem);
  --fs-h2:      clamp(1.8rem, 3.5vw, 3rem);
  --fs-h3:      1.25rem;
  --fs-body:    clamp(16px, 1.1vw, 18px);
  --fs-small:   0.85rem;
  --fs-mono:    0.78rem;

  /* --- spacing scale (4px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* --- radii --- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* --- borders & transitions --- */
  --border:  1px solid var(--faint);
  --t-fast:  .15s ease;
  --t:       .25s ease;

  /* --- layout --- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 12vh, 160px);
  --nav-h: 66px; /* logo (30px) + 2×18px vertical padding */
}