/* ============================================================================
   TOKENS — the vocabulary of the whole experience.

   Two layers:
   1. --set-*  : the *editable* identity. The admin panel writes these onto
                 :root at runtime, so João can change fonts, colour, scale,
                 spacing, radius and grain without touching code.
   2. everything else derives from the --set-* layer, so one change propagates.
   ============================================================================ */

:root {
  /* ── 1. EDITABLE IDENTITY (admin-controlled; these are the defaults) ─────── */
  --set-bg:            #060708;
  --set-ink:           #f2f0ea;
  --set-accent:        #d8b27c;
  --set-paper:         #ece7dc;
  --set-scale:         1;       /* global type scale multiplier */
  --set-space:         1;       /* section rhythm multiplier */
  --set-radius:        0px;     /* corner radius on media */
  --set-grain:         0.3;     /* film-grain opacity 0–1 */
  --set-font-display:  "Fraunces";
  --set-font-sans:     "Inter";
  --set-font-mono:     "JetBrains Mono";

  /* ── 2. Colour, derived ──────────────────────────────────────────────────── */
  --c-void:        var(--set-bg);
  --c-void-2:      color-mix(in oklab, var(--set-bg) 88%, var(--set-ink));
  --c-ink:         var(--set-ink);
  --c-ink-dim:     color-mix(in oklab, var(--set-ink) 68%, transparent);
  --c-ink-mute:    color-mix(in oklab, var(--set-ink) 56%, transparent);
  --c-ink-faint:   color-mix(in oklab, var(--set-ink) 16%, transparent);
  --c-line:        color-mix(in oklab, var(--set-ink) 12%, transparent);
  --c-line-soft:   color-mix(in oklab, var(--set-ink) 7%, transparent);
  --c-accent:      var(--set-accent);

  --c-paper:       var(--set-paper);
  --c-paper-ink:   color-mix(in oklab, var(--set-paper) 12%, #05040a);
  --c-paper-dim:   color-mix(in oklab, var(--set-paper) 30%, #05040a);
  --c-paper-line:  color-mix(in oklab, #05040a 14%, transparent);

  --bg:  var(--c-void);
  --fg:  var(--c-ink);
  --radius: var(--set-radius);

  /* ── Type families (which vendored/system face fills each role) ──────────── */
  --f-display: var(--set-font-display), "Times New Roman", serif;
  --f-sans:    var(--set-font-sans), system-ui, -apple-system, sans-serif;
  --f-mono:    var(--set-font-mono), ui-monospace, "SFMono-Regular", monospace;

  /* ── Fluid type scale (× the editable scale) ─────────────────────────────── */
  --fs-nano:   calc(clamp(0.66rem, 0.62rem + 0.18vw, 0.75rem) * var(--set-scale));
  --fs-micro:  calc(clamp(0.75rem, 0.71rem + 0.2vw,  0.875rem) * var(--set-scale));
  --fs-small:  calc(clamp(0.85rem, 0.8rem + 0.25vw,  0.98rem) * var(--set-scale));
  --fs-body:   calc(clamp(1rem,    0.95rem + 0.3vw,  1.2rem) * var(--set-scale));
  --fs-lede:   calc(clamp(1.25rem, 1.1rem + 0.9vw,   1.9rem) * var(--set-scale));
  --fs-h3:     calc(clamp(1.5rem,  1.2rem + 1.6vw,   2.6rem) * var(--set-scale));
  --fs-h2:     calc(clamp(2.2rem,  1.4rem + 4vw,     4.8rem) * var(--set-scale));
  --fs-display:calc(clamp(3rem,    1rem + 11vw,      12.5rem) * var(--set-scale));
  --fs-mega:   calc(clamp(3.4rem,  0.5rem + 14vw,    17rem) * var(--set-scale));

  --w-thin: 300; --w-book: 400; --w-med: 500; --w-semi: 600;

  /* ── Space (× editable rhythm) ───────────────────────────────────────────── */
  --sp-1: 0.5rem; --sp-2: 0.75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem;
  --sp-6: 3rem; --sp-7: 4.5rem; --sp-8: 6.5rem; --sp-9: 9rem;
  --section:  calc(clamp(6rem, 4rem + 12vw, 16rem) * var(--set-space));
  --gutter:   clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --measure:  68ch;

  --container: 88rem;
  --container-wide: 100rem;
  --frame-inset: clamp(0.75rem, 0.4rem + 1.6vw, 1.6rem);

  /* ── Motion (JS also scales GSAP/Lenis by the editable motion value) ─────── */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout:  cubic-bezier(0.76, 0, 0.24, 1);
  --e-soft:   cubic-bezier(0.4, 0, 0.1, 1);
  --d-1: 0.4s; --d-2: 0.7s; --d-3: 1.1s; --d-4: 1.6s;

  /* ── Elevation ───────────────────────────────────────────────────────────── */
  --z-content: 1; --z-frame: 40; --z-index-menu: 45; --z-chrome: 50;
  --z-viewer: 70; --z-lightbox: 75; --z-grain: 90; --z-cursor: 95; --z-loader: 100;
}

[data-tone="paper"] { --bg: var(--c-paper); --fg: var(--c-paper-ink); }