/* Design tokens. Re-skin the whole display by editing this file. */
:root {
  /* Type — system stack keeps it offline-safe and instant (no web-font FOIT). */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);

  /* Palette — deep, warm "tap-room at night" theme. */
  --bg: #0d0b10;
  --bg-elev: #16131c;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.11);
  --border: rgba(255, 255, 255, 0.18);

  /* Text hierarchy. Opacities chosen to all clear WCAG AA (>=4.5:1) on --bg,
     so even the smallest "faint" label stays legible on the dark theme. */
  --text: #f8f5f0;
  --text-dim: rgba(248, 245, 240, 0.84);   /* descriptions, leads — was 0.62 */
  --text-faint: rgba(248, 245, 240, 0.66); /* labels, captions   — was 0.38 */

  --gold: #e6b800;
  --accent: var(--gold);     /* per-item slides override this inline */

  --live: #4ade80;
  --sample: #f59e0b;

  /* Fluid type scale — everything sizes off the viewport so it fills any screen,
     portrait or landscape, from a phone to a 4K wall. */
  --fs-eyebrow: clamp(0.9rem, 1.6vmin, 1.6rem);
  --fs-body: clamp(1.1rem, 2.2vmin, 2.2rem);
  --fs-lead: clamp(1.4rem, 3vmin, 3.2rem);
  --fs-h2: clamp(1.8rem, 4.5vmin, 4.6rem);
  --fs-h1: clamp(3rem, 9vmin, 10rem);
  --fs-mega: clamp(4rem, 13vmin, 15rem);

  --gap: clamp(1rem, 2.5vmin, 3rem);
  --pad: clamp(2rem, 6vmin, 7rem);
  --radius: clamp(0.8rem, 1.6vmin, 1.6rem);

  /* Crossfade length — MUST equal config.transitionMs (src/config.js). */
  --transition-ms: 900ms;
}