/* =============================================================================
   tokens.css — the single source of truth (UI-001 / KD-1).
   No view file hard-codes a colour, font, or z-index; everything references a
   custom property defined here. Palette = deep twilight + bioluminescent gold/
   amber/neon-green. Dark-mode-only by design.
   ========================================================================== */

/* --- Self-hosted variable fonts (woff2, font-display: swap). Declared here so
   tokens.css is the single source of truth for fonts (KD-1). ---------------- */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Palette: twilight grounds ----------------------------------------- */
  --bg-midnight: #070b16; /* deepest sky / page floor */
  --bg-navy: #0c1326;
  --bg-charcoal: #11151f;
  --bg-forest: #091310; /* forest-black foreground */

  /* --- Palette: bioluminescence ------------------------------------------ */
  --accent-gold: #f7cf63;
  --accent-amber: #ffb24d;
  --accent-neon: #9ef0a8; /* ethereal neon-green */
  --accent-neon-deep: #54c878;

  /* --- Raw colour channels (views COMPOSE alpha; they never hard-code a
     colour — KD-1). Use as `rgb(var(--c-ink) / 0.5)`. ---------------------- */
  --c-ink: 7 11 22; /* deepest scrim ink */
  --c-navy: 12 19 38;
  --c-gold: 247 207 99;
  --c-amber: 255 178 77;
  --c-neon: 158 240 168;
  --c-shadow: 0 0 0;

  /* --- Text -------------------------------------------------------------- */
  --text: #f4f0e4; /* warm parchment */
  --text-dim: #b6bccb; /* cool secondary */
  --text-faint: #7e8597;

  /* --- Content-surface scrims (readability, NOT a global overlay — §3) ----
     Bounded so worst-case (a bright generated frame behind) still clears
     WCAG AA for body text/links/code. Verified by the KD-10 fixtures. */
  --scrim-alpha-min: 0.74;
  --surface-feed: rgba(7, 11, 22, 0.72);
  --surface-prose: rgba(7, 10, 20, 0.84);
  --surface-card: rgba(14, 21, 38, 0.55);
  --surface-card-hover: rgba(20, 29, 50, 0.66);
  --hairline: rgba(247, 207, 99, 0.16); /* faint gold rule */
  --hairline-strong: rgba(247, 207, 99, 0.34);

  /* --- Typography -------------------------------------------------------- */
  --font-serif: "Fraunces", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* Fluid type scale (clamp: min @ 360px → max @ 1280px). */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.22vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.11rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.28rem + 0.7vw, 2rem);
  --step-3: clamp(1.73rem, 1.46rem + 1.18vw, 2.66rem);
  --step-4: clamp(2.07rem, 1.62rem + 1.96vw, 3.55rem);
  --step-5: clamp(2.49rem, 1.74rem + 3.3vw, 5rem);
  --step-6: clamp(2.98rem, 1.62rem + 5.95vw, 7rem);

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-prose: 1.72;
  --measure: 68ch; /* prose column width (UI-004) */
  --tracking-wide: 0.18em;

  /* --- Space & radius ---------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-round: 999px;

  /* --- Glow (the firefly signature, reused everywhere — KD-7) ------------ */
  --glow-gold: 0 0 0.5em rgba(247, 207, 99, 0.55),
    0 0 1.6em rgba(247, 207, 99, 0.28);
  --glow-neon: 0 0 0.55em rgba(158, 240, 168, 0.5),
    0 0 1.8em rgba(84, 200, 120, 0.25);
  --text-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.55);
  /* Hero copy legibility over the brightest video frame (KD-2, KD-10). */
  --text-shadow-hero: 0 1px 3px rgba(0, 0, 0, 0.55),
    0 4px 22px rgba(0, 0, 0, 0.7), 0 0 60px rgba(0, 0, 0, 0.5);

  /* --- z-layers (the scene stack — §3) ----------------------------------- */
  --z-base: 0; /* twilight gradient (body) */
  --z-bokeh: 10; /* drifting firefly canvas (fixed) */
  --z-scene: 20; /* hero video/poster | per-post bg (pinned) */
  --z-creature: 30; /* creature silhouettes (hero band) */
  --z-content: 50; /* header, feed, article */
  --z-header: 60;
  --z-skip: 100;

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 180ms;
  --dur-2: 360ms;
  --dur-3: 700ms;
}