/* ==========================================================================
   ICONIC VOICES — tokens (2026-09-03). ONE source of truth for the web.
   Loaded FIRST on every page. Mirrors the iOS app's
   iconicvoices-app-ios/IconicVoices/DesignSystem/IVTheme.swift
   ("a private library at night": neutral near-black + gold leaf + neutral ink).
   Decision doc: docs/design/DESIGN-DECISION-2026-09-03.md
   Any change here is a change there; keep the two files diff-able.
   ========================================================================== */
:root {
  color-scheme: dark;
  /* ground — neutral near-black, NOT brown */
  --iv-canvas:      #0A0A0B;   /* ivBackground */
  --iv-surface-1:   #131317;   /* ivSurface1 — nav glass, footer, inputs   */
  --iv-surface-2:   #17171C;   /* ivSurface2 — cards, chips, player        */
  --iv-surface-3:   #1E1E24;   /* ivSurface3 — drawer, modal, consent      */
  --iv-overlay:     rgba(10, 10, 11, 0.82);
  --iv-scrim:       10, 10, 11;  /* rgb triplet for scrims: the canvas, never brown */
  --iv-scroll:      0;           /* 0..1, written by iv-bg-v2.js while the hero scrolls away */

  /* gold leaf — the only accent */
  --iv-gold:        #C9A84C;   /* ivGold      */
  --iv-gold-light:  #E8D48B;   /* ivGoldLight */
  --iv-gold-deep:   #A8862F;   /* ivGoldDeep  */
  --iv-on-gold:     #20180A;   /* ivOnGold    */

  /* ink — neutral */
  --iv-ink:         #F6F6F8;   /* ivInk          18.3:1 on canvas */
  --iv-ink-2:       #B6B6BE;   /* ivInkSecondary  9.8:1           */
  --iv-ink-3:       #8E8E97;   /* web-only: 4 steps above ivInkTertiary #84848C
                                  so captions hold 5.1:1 on surface-3 (app value = 4.47:1) */

  /* hairlines — there are no glows on the web (THE THRESHOLD, L2) */
  --iv-hairline:        rgba(201, 168, 76, 0.12);  /* ivHairlineGold           */
  --iv-hairline-strong: rgba(201, 168, 76, 0.30);  /* ivHairlineGoldEmphasized */
  --iv-hairline-white:  rgba(255, 255, 255, 0.06); /* ivHairlineWhite          */
  --iv-gold-wash:       rgba(201, 168, 76, 0.08);  /* hover fill for ghost/chips */
  --iv-gold-wash-2:     rgba(201, 168, 76, 0.14);  /* active chip fill           */

  /* semantic */
  --iv-provenance-cool: #9FB0C8;   /* ivProvenanceCool — Studio AI / Disputed ONLY */
  --iv-success:         #34C759;
  --iv-error:           #FF453A;

  /* focus: two rings so it holds 3:1 on canvas AND on a gold plate */
  --iv-focus: 0 0 0 1px var(--iv-canvas), 0 0 0 3px var(--iv-gold-light);

  /* button plate (L2: flat plate + 1px edge-light, radius 2, press goes DOWN) */
  --iv-btn-radius:      2px;
  --iv-btn-edge:        inset 0 1px 0 rgba(232, 212, 139, 0.55);   /* brass top light */
  --iv-btn-press:       inset 0 2px 6px rgba(0, 0, 0, 0.35);       /* pressed         */

  /* shadows — neutral, no gold */
  --iv-shadow-1: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
  --iv-shadow-2: 0 40px 90px -30px rgba(0, 0, 0, 0.85);

  /* text over footage (section headings that overlap the film while scrolling) */
  --iv-halo: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 24px rgba(0, 0, 0, 0.45);

  /* type + motion + layout */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --iv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --iv-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);   /* springs retired: same curve */
  --iv-d1: 0.22s; --iv-d2: 0.45s; --iv-d3: 0.8s;
  --iv-radius: 18px;            /* cards (app IVRadius.card) */
  --iv-radius-lg: 24px;         /* modals (app IVRadius.modal) */
  --content-max-width: 1200px; --nav-height: 68px; --mobile-cta-height: 56px;
  --section-padding: 96px; --card-radius: 18px; --card-gap: 24px; --maxw: 880px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s; --duration-normal: 0.3s; --duration-slow: 0.6s;

  /* ---- COMPAT ALIASES — the 2025 (style.css), 2026 (iv-2026.css) and voice-page
     token names resolve to the same values. Delete each alias when
     `grep -c 'var(--<name>'` across css+html is 0. ---- */
  --bg-primary: var(--iv-canvas);     --bg-secondary: var(--iv-surface-1);
  --bg-tertiary: var(--iv-surface-2); --bg-overlay: var(--iv-overlay);
  --gold-primary: var(--iv-gold);     --gold-light: var(--iv-gold-light);
  --gold-dark: var(--iv-gold-deep);
  --gold-glow: transparent;           --gold-glow-strong: transparent;
  --text-primary: var(--iv-ink);      --text-secondary: var(--iv-ink-2);
  --text-tertiary: var(--iv-ink-3);
  --border-subtle: var(--iv-hairline); --border-card: var(--iv-hairline);
  --border-active: var(--iv-hairline-strong);
  --success: var(--iv-success);       --error: var(--iv-error);
  --focus-ring: var(--iv-focus);
  --iv-elev-0: var(--iv-canvas); --iv-elev-1: var(--iv-surface-1);
  --iv-elev-2: var(--iv-surface-2); --iv-elev-3: var(--iv-surface-3);
  --iv-elev-card: var(--iv-surface-2);
  --iv-gold-2: var(--iv-gold-light); --iv-gold-ink: var(--iv-on-gold);
  --iv-line: var(--iv-hairline); --iv-line-soft: var(--iv-hairline-white);
  --iv-line-strong: var(--iv-hairline-strong);
  --iv-glow: transparent; --iv-glow-strong: transparent; --iv-shadow-gold: none;
  --iv-lamp-green: var(--iv-gold); --iv-lamp-green-2: var(--iv-gold-light);
  --iv-lamp-green-fill: var(--iv-gold-wash-2);
  --prov-restored: var(--iv-gold); --prov-narrator: var(--iv-provenance-cool);
  --prov-disputed: var(--iv-provenance-cool);
}

/* Horizontal gutter of .container (style.css .container padding / iv-2026 380px override).
   Rails and chip strips bleed into it so they start flush with the text column. */
:root { --iv-gutter: 24px; }
@media (max-width: 380px) { :root { --iv-gutter: 14px; } }