/* ================================================================
   tokens.css - design tokens. Single source of truth.
   Palette, typography, mood (shape + motion), and derived accent
   tints all live here. layout.css and components.css only reference
   these variables; they never hardcode design values.

   Mood: Cold. Accent: dark vermillion, two-tier color system.
   ================================================================ */

:root {
  /* -------------------------------------------------------------
     TYPOGRAPHY - one block. Display = high-contrast system serif (Didot /
     Bodoni MT); body = clean system sans (Avenir Next / Segoe UI).
     No webfonts - system stacks only.
     ------------------------------------------------------------- */
  --font-display: "Didot", "Bodoni MT", "Bodoni 72", Georgia, "Times New Roman", serif;
  --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-hero: clamp(3.2rem, 13vw, 8.75rem);
  --text-section: clamp(1.7rem, 4.5vw, 2.5rem);
  --text-title: clamp(1.2rem, 2.6vw, 1.6rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.72rem;

  --track-label: 0.46em;  /* kickers / labels - wide, light */
  --track-title: 0.3em;   /* section titles */
  --track-hero: 0.06em;   /* hero / display */
  --track-nav: 0.28em;

  --fw-display: 400;  /* light-weight serif, widely tracked */
  --fw-body: 400;
  --fw-medium: 600;

  /* -------------------------------------------------------------
     PALETTE - cold base (blue-black, faint cool ink).
     ------------------------------------------------------------- */
  --bg: #07090d;
  --bg-raised: #0e1118;
  --ink: #d0d6e0;
  --ink-dim: #8d95a6;
  --line: rgba(208, 214, 224, 0.14);

  /* Accent - two-tier (dark vermillion).
     --accent         fills & surfaces (buttons, solid tag fills)
     --accent-bright  text, hairlines, thin lines, progress, focus
     White on --accent fills ~= 8.3:1. --accent-bright text against
     --bg ~= 3.5:1 (passes the 3:1 non-text / large-text threshold;
     see session-log for the small-label caveat). */
  --accent: #a00a11;
  --accent-bright: #c6242c;

  /* Derived accent tints via color-mix() - Chrome 111+ / Firefox
     113+ / Safari 16.2+, all within the "latest" target set.
     Declared at :root; the final site does not override --accent
     per element, so root-level resolution is safe. */
  --accent-tint-07: color-mix(in srgb, var(--accent) 7%, var(--bg-raised));
  --accent-tint-22: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-tint-30: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-line-35: color-mix(in srgb, var(--accent-bright) 35%, var(--line));
  --accent-line-70: color-mix(in srgb, var(--accent-bright) 70%, var(--line));

  /* "Fog" ember - a single faint accent glow, fixed just above the
     dock (was a repeated divider glow in pre-release. See internal decision ref doc).
     Painted behind the content in base.css (body::before).
     --dock-h sits a few px BELOW the dock's real height on purpose:
     the glow overlaps behind the dock top edge so no seam shows between glow and dock. */
  --dock-h: 74px;
  --glow-h: 200px;
  --glow-bg: radial-gradient(80% 130% at 50% 125%, var(--accent-tint-22), transparent 72%);

  /* -------------------------------------------------------------
     MOOD: cold - soft shapes, faint ember, slow drift,
     generous dark space.
     ------------------------------------------------------------- */
  --radius: 999px;        /* pill */
  --radius-card: 12px;

  --dur: 0.8s;            /* slow drift */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --noise-opacity: 0.07;  /* light film grain */
  --divider-h: 96px;

  --shadow-card: 0 16px 44px rgba(0, 0, 0, 0.5);
  --btn-glow: 0 0 44px var(--accent-tint-30);

  --dock-bg: rgba(14, 17, 24, 0.82);
  --dock-blur: 18px;

  /* Sticky nav height - drives scroll-margin so anchor jumps land the
     section top below the nav. --section-head-h covers the head that
     sits above the container anchors (#latest, #discography, #about). */
  --nav-h: 64px;
  --section-head-h: 84px;
}

/* The mobile dock is shorter (smaller transport buttons); the nav
   wraps to two rows and grows. */
@media (max-width: 760px) {
  :root {
    --dock-h: 71px;
    --nav-h: 92px;
  }
}