/* ============================================================================
   Final Days — shared brand layers: tokens + themes
   ----------------------------------------------------------------------------
   ONE source of truth for the palette and the type/geometry tokens. Both the
   landing page (/) and the transcript page (/transcript/) link this file, so a
   brand change is a one-file edit instead of two copies drifting apart.

   Replaces build-transcript.js (retired 2026-09-21), which used to copy these
   two layers out of the landing page's inline <style> at build time and re-root
   every url("assets/...") to url("../assets/...") for the transcript copy.

   WHY THE url() PATHS ARE ROOT-ABSOLUTE (/assets/...)
   A url() that arrives through a CUSTOM PROPERTY is resolved against the DOCUMENT's base URL,
   not the stylesheet's — Chromium does not honour the stylesheet location for these. So a plain
   "hero-....webp" here would mean /hero-....webp from the site root and
   /transcript/hero-....webp from the transcript page: broken on BOTH. Root-absolute paths
   resolve identically from every page, which is what lets one file serve both, and is why the
   old build had to re-root these to "../assets/..." per page.

   CASCADE ORDER
   Only tokens and themes live here. The @layer order statement that fixes the
   cascade (reset, tokens, themes, base, components, utilities) stays in each
   page's inline <style>, because reset/base/components differ per page. Linking
   this file ahead of reset is inert: neither layer declares a property that
   reset declares.
   ============================================================================ */

/* ============================================================
   TOKENS — change these to restyle the whole page.
   Themes only override tokens. Components never hard-code brand colors.
   ============================================================ */
@layer tokens {
  :root {
    --font-display: "Cormorant Garamond", "Palatino Linotype", Palatino, serif;
    --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --font-script: "Great Vibes", "Segoe Script", cursive;
    --font-brand: "BatmanForeverAlternate", "Arial Black", Impact, sans-serif;

    --radius-card: 1.15rem;
    --radius-btn: 0.7rem;
    --radius-pill: 999px;
    --shadow-card: 0 12px 28px oklch(0.3 0.04 250 / 0.07), 0 1px 0 oklch(1 0 0 / 0.58) inset;
    --shadow-hero: 0 22px 50px oklch(0.25 0.06 250 / 0.28);
    --player-border-rotation: 18s;
    --player-border-width: 4px;
    /* Independent halo opacity control; geometry and color remain unchanged. */
    --player-glow-opacity: 0.18;
    /* Halo geometry scale: 1 = approved desktop size; reduced inside the mobile
       hero container so the fixed-pixel halo does not overweight a small player. */
    --player-glow-scale: 1;
    /* Player width token; the side callouts remain in their own grid columns. */
    --player-max-width: 60rem;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --content: 72rem;
    --gutter: clamp(1rem, 3.2cqi, 2rem);
    --footer-stack-space: clamp(2.25rem, 4.5cqi, 3rem);

    --focus: var(--brand);
    --ok: oklch(0.55 0.14 145);
    --danger: oklch(0.55 0.18 25);
    --form-field-surface: color-mix(in oklch, var(--cta) 5%, var(--paper-2));

    /* Optional tokens for video chrome, play button, wordmark glow, and footer veil. */
    --video-chrome-bg: oklch(0.12 0.03 250);
    --video-chrome-bg-raised: oklch(0.16 0.03 250);
    --video-chrome-ink: white;
    --play-bg: color-mix(in oklch, var(--accent-2) 82%, white);
    --play-ink: white;
    --play-pulse: oklch(0.97 0.02 90 / 0.78);
    --brand-glow: 0 0 0.45em color-mix(in oklch, var(--gold) 42%, transparent);
    --foot-veil-image: none;
    --foot-veil-opacity: 0;
    --foot-pad-block-end: 1.8rem;
    --foot-bg: var(--paper);
    --foot-veil-mask: linear-gradient(to bottom, transparent 0%, #000 48%);
  }
}

@layer themes {
  /* AMERICA — matches the design file. (:root fallback only when no data-theme is set.) */
  :root:not([data-theme]),
  [data-theme="america"] {
    --brand: oklch(0.32 0.08 250);
    --brand-deep: oklch(0.24 0.07 250);
    --accent: oklch(0.5 0.17 25);
    --accent-2: oklch(0.42 0.12 255);
    --gold: oklch(0.72 0.1 80);
    --ink: oklch(0.28 0.04 250);
    --ink-soft: oklch(0.42 0.03 250);
    --muted: oklch(0.5 0.02 250);
    --paper: oklch(0.975 0.008 90);
    --paper-2: oklch(0.99 0.004 90);
    --line: oklch(0.86 0.02 250);
    --badge-1: oklch(0.52 0.17 25);
    --badge-2: oklch(0.4 0.12 255);
    --badge-3: oklch(0.5 0.16 25);
    --cta: oklch(0.38 0.12 255);
    --cta-ink: oklch(0.99 0.01 250);
    --rail-chip: var(--accent-2);
    --rail-chip-ink: var(--cta-ink);
    --theme-color: #1b365d;
    --foot-veil-image: url("/assets/footer-mountains-v1.webp");
    --foot-veil-opacity: 0.84;
    --foot-pad-block-end: 3.8rem;
    --foot-bg: transparent;
    --hero-veil: oklch(0.97 0.01 240 / 0.72);
    --img-hero-america: url("/assets/hero-america-backdrop-v3.webp");
    /* Local study background asset. */
    --img-study: url("/assets/study-mountains-v2.webp");
    --img-presenter: none;
    --theme-label: "America";
  }

  /* Additional theme variants slot in here, e.g.
     [data-theme="sabbath"] { --brand: oklch(...); }.
     The retired generator kept five empty slots at this point. */
}