/* ============================================================
   TOKENS — single source of truth for the design system.
   Change values here; never hardcode colour/size elsewhere.
   ============================================================ */

:root {
  /* ---- Palette: monochrome only ------------------------- */
  --c-black:      #050505;
  --c-ink:        #0b0b0b;
  --c-ink-2:      #121212;
  --c-ink-3:      #1a1a1a;
  --c-line:       rgba(255, 255, 255, 0.10);
  --c-line-soft:  rgba(255, 255, 255, 0.06);
  --c-line-hard:  rgba(255, 255, 255, 0.22);
  --c-mute:       rgba(255, 255, 255, 0.42);
  --c-mute-2:     rgba(255, 255, 255, 0.62);
  --c-white:      #ffffff;

  /* Semantic aliases — components reference these ---------- */
  --bg:           var(--c-black);
  --bg-elev:      var(--c-ink);
  --fg:           var(--c-white);
  --fg-mute:      var(--c-mute-2);
  --fg-faint:     var(--c-mute);
  --line:         var(--c-line);
  --line-strong:  var(--c-line-hard);

  /* ---- Type --------------------------------------------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Fluid scale — clamp(min, preferred, max) */
  --fs-xs:   clamp(0.68rem, 0.64rem + 0.18vw, 0.78rem);
  --fs-sm:   clamp(0.80rem, 0.76rem + 0.20vw, 0.92rem);
  --fs-base: clamp(0.95rem, 0.90rem + 0.28vw, 1.10rem);
  --fs-md:   clamp(1.10rem, 1.00rem + 0.55vw, 1.45rem);
  --fs-lg:   clamp(1.50rem, 1.20rem + 1.40vw, 2.60rem);
  --fs-xl:   clamp(2.20rem, 1.40rem + 3.60vw, 5.00rem);
  --fs-2xl:  clamp(3.00rem, 1.20rem + 8.20vw, 10.0rem);
  --fs-3xl:  clamp(3.60rem, 0.60rem + 12.0vw, 15.0rem);

  --lh-tight: 0.92;
  --lh-snug:  1.12;
  --lh-body:  1.62;
  --tr-tight: -0.03em;
  --tr-wide:  0.16em;

  /* ---- Space (8px rhythm) -------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(5rem, 10vw, 11rem);

  /* ---- Layout ------------------------------------------- */
  --container: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --header-h: 76px;

  /* ---- Motion ------------------------------------------- */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --e-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast:  0.24s;
  --d-base:  0.45s;
  --d-slow:  0.9s;

  /* ---- Depth / misc ------------------------------------- */
  --radius: 2px;
  --z-canvas: 1;
  --z-content: 10;
  --z-header: 100;
  --z-menu: 200;
  --z-cursor: 900;
  --z-loader: 1000;
}

/* Light inversion — the black/white system flips wholesale.
   Toggle with document.documentElement.dataset.theme = 'light'. */
:root[data-theme="light"] {
  --c-line:      rgba(0, 0, 0, 0.12);
  --c-line-soft: rgba(0, 0, 0, 0.06);
  --c-line-hard: rgba(0, 0, 0, 0.26);
  --c-mute:      rgba(0, 0, 0, 0.45);
  --c-mute-2:    rgba(0, 0, 0, 0.65);

  --bg:      #f4f4f2;
  --bg-elev: #ffffff;
  --fg:      #050505;
}