/* ===================================================================
 * tw-design-tokens-v4.css  —  TriviaWorks Editor v4 design tokens
 *
 * Ported verbatim from the Claude Design v4 handoff bundle
 * (spec/tokens-v4.css, 19 Apr 2026). See
 *   _shared/design-spec/ (v1 bundle — retained for reference)
 *   corpus/claude-design-v2-brief.md (brief for v2→v4)
 *
 * Shipping model:
 *   - v4 tokens live under dedicated names (--paper-*, --stage-*,
 *     --pool-*, --fmt-*, --q-*, --gold-*). They do NOT collide with
 *     the v1 `tw-design-tokens.css` variables (--bg, --ink, --line,
 *     --navy, --gold, etc.). Both token files co-exist.
 *   - This file defines palette + type + shape + motion variables
 *     ONLY. It does NOT paint the body or override existing chrome
 *     backgrounds. Components opt in by referencing the v4 names
 *     (e.g. `.app-topbar { background: var(--paper-raised); }`).
 *   - The `.chip-*` block here redefines the v4 chip palette — we
 *     scope it to `.v4-chrome *` so it does not compete with the
 *     v1 chips defined in tw-design-tokens.css.
 * =================================================================== */

/* ===================================================================
 * Gotham — brand family (logo + headline use)
 * Full 8-weight ladder served from /fonts/ via sync.js whitelist.
 * Gotham is the brand typeface; Söhne/Inter remains the UI body sans.
 * =================================================================== */
@font-face { font-family: 'Gotham'; font-style: normal; font-weight: 100; font-display: swap; src: url('/fonts/Gotham-Thin.woff2')   format('woff2'); }
@font-face { font-family: 'Gotham'; font-style: normal; font-weight: 200; font-display: swap; src: url('/fonts/Gotham-XLight.woff2') format('woff2'); }
@font-face { font-family: 'Gotham'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Gotham-Light.woff2')  format('woff2'); }
@font-face { font-family: 'Gotham'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Gotham-Book.woff2')   format('woff2'); }
@font-face { font-family: 'Gotham'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Gotham-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Gotham'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Gotham-Bold.woff2')   format('woff2'); }
@font-face { font-family: 'Gotham'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Gotham-Black.woff2')  format('woff2'); }
@font-face { font-family: 'Gotham'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/Gotham-Ultra.woff2')  format('woff2'); }

/* Gotham Narrow — slide typography (the renderer emits font-family="Gotham Narrow").
 * Previously these declarations lived inline in buzzer_play.html / bank_editor.html /
 * buzzer_editor.html / buzzer_game_screen.html / buzzer_host_v2.html and were missing
 * from any surface that imports only this stylesheet (e.g. dev harnesses, future
 * editor surfaces). Lifting into the shared design-tokens stylesheet so any page that
 * loads this CSS gets Gotham Narrow without per-page duplication.
 */
@font-face { font-family: 'Gotham Narrow'; src: url('/fonts/GothamNarrow-Book.woff2')   format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham Narrow'; src: url('/fonts/GothamNarrow-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham Narrow'; src: url('/fonts/GothamNarrow-Bold.woff2')   format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham Narrow'; src: url('/fonts/GothamNarrow-Black.woff2')  format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root, html[data-theme="light"] {
  /* ---------- Paper (chrome surface) ---------- */
  --paper:          #FBF8F2;
  --paper-sunk:     #F3EEE3;
  --paper-raised:   #FFFFFF;
  --paper-hover:    #F7F2E6;

  /* ---------- Stage (canvas surface — brand pays rent here) ---------- */
  --stage-v4:       #0A1628;
  --stage-hi:       #132240;
  --stage-lo:       #050B17;
  --stage-ink-v4:   #F2ECD9;
  --stage-gold-v4:  #FFC000;
  --stage-gold-dim-v4: #BF9000;
  --stage-gold-hi:  #FFD84D;
  /* Editor-chrome dark variants (Arc audit F25). Used by the Slides
     Editor stage bar, slide-strip tiles, and Play Slideshow chrome.
     --stage-bg-deep is a neutral near-black used for the slide-strip
     thumbnail background (NOT the slide canvas itself, which uses
     --stage-v4). --stage-text is an alias for stage-ink-v4 kept
     short for inline-style use. */
  --stage-bg-deep:  #1a1a1a;
  --stage-text:     #F2ECD9;
  /* arc-c: --white-dim is a solid token so automated contrast tools can
     measure it correctly. Value is the warm-cream solid that most closely
     matches rgba(242,236,217,0.55) composited onto #0A1628 (navy).
     Contrast: 4.70:1 on --stage-hi, 5.39:1 on --stage-v4, 5.86:1 on --stage-lo.
     Old definition was an rgba per-file inline — see bbt_play / bbz_host locals. */
  --white-dim:      #908C80;

  /* ---------- Ink (warm charcoal family) ---------- */
  --ink-v4:         #1C1410;
  --ink-soft-v4:    #3D342E;
  --ink-muted-v4:   #6B5F55;
  /* arc-c: darkened to meet WCAG AA (4.5:1) on all paper backgrounds.
     --ink-faint-v4: was #998A7D (~2.89:1 on --paper-sunk); now 4.69:1 on --paper-sunk, 5.43:1 on white.
     --ink-ghost:    was #C9BDAE (~1.60:1 on --paper-sunk); now 4.61:1 on --paper-sunk, 5.33:1 on white.
     Both retain the warm-brown hue and the faint > ghost visual hierarchy. */
  --ink-faint-v4:   #73685E;
  --ink-ghost:      #716A61;

  /* ---------- Lines ---------- */
  --rule-heavy:     #D9CFBD;
  --rule-v4:        #E7DEC9;
  --rule-soft:      #EFE7D3;
  --rule-ghost:     #F5EEDD;

  /* ---------- Brand system ---------- */
  --gold-v4:        #8A6500;
  --gold-deep:      #5E4500;
  --gold-bright:    #C89200;
  --gold-soft-bg:   #F7EDD1;
  --gold-wash:      #FCF6E6;

  /* ---------- Pool accents (each pool has its own identity) ---------- */
  --pool-import:       #B15C1E;
  --pool-import-bg:    #FBE8D8;
  --pool-import-wash:  #FDF2E6;

  --pool-internal:     #3B6B4A;
  --pool-internal-bg:  #E1EFDD;
  --pool-internal-wash:#F0F7EC;

  --pool-external:     #3E4F87;
  --pool-external-bg:  #DFE4F2;
  --pool-external-wash:#EDF0F9;

  /* ---------- Format accents ---------- */
  --fmt-gob:      #7A3B82;
  --fmt-gob-bg:   #EFDEF2;
  --fmt-bbt:      #0F5C7C;
  --fmt-bbt-bg:   #D7E8F0;
  --fmt-bbz:      #B2401E;
  --fmt-bbz-bg:   #FAD9CF;

  /* ---------- Quality dimensions (Format Composer) ---------- */
  --q-diversity:   #2A6A72;
  --q-balance:     #5E4A8E;
  --q-difficulty:  #8E4A3C;
  --q-freshness:   #4A7A3A;

  /* ---------- Semantic ---------- */
  --good-v4:       #2E6B3E;
  --good-bg-v4:    #DDEEDF;
  --warn-v4:       #B06A14;
  --warn-bg-v4:    #FBEBD2;
  --danger-v4:     #A83A2A;
  --danger-bg-v4:  #F7DCD6;
  --info-v4:       #2B5E8A;
  --info-bg-v4:    #D6E4F0;

  /* ---------- Type ---------- */
  /* 2026-04-24: Gotham-led across v5. The serif slot is retired in favour of
     Gotham at heavier weights (700 Bold / 800 Black / 900 Ultra) for display.
     Inter / Söhne kept as system fallback if Gotham is somehow unavailable. */
  --serif-v4:      'Gotham','Inter','Söhne',-apple-system,system-ui,sans-serif;
  --sans-v4:       'Gotham','Inter','Söhne',-apple-system,system-ui,sans-serif;
  --mono-v4:       'JetBrains Mono','Berkeley Mono',ui-monospace,monospace;

  /* ---------- Shape ---------- */
  --r-xs:  3px;
  /* --r-sm/--r-md/--r-lg already defined by v1 tokens (4/7/10px).
     v4 wants slightly rounder 5/8/12/18 — alias under -v4 names. */
  --r-sm-v4:  5px;
  --r-md-v4:  8px;
  --r-lg-v4:  12px;
  --r-xl:     18px;

  /* ---------- Shadows ---------- */
  --shadow-xs-v4:    0 1px 0 rgba(40,28,12,0.04);
  --shadow-sm-v4:    0 1px 3px rgba(40,28,12,0.06), 0 0 0 0.5px rgba(40,28,12,0.04);
  --shadow-md-v4:    0 6px 20px rgba(40,28,12,0.08), 0 1px 3px rgba(40,28,12,0.05);
  --shadow-lg-v4:    0 24px 64px rgba(40,28,12,0.14), 0 2px 8px rgba(40,28,12,0.06);
  --shadow-inset-v4: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-io:   cubic-bezier(0.76, 0, 0.24, 1);
}

/* ===================================================================
 * v4 scope helpers
 *
 * Any ancestor with class `.v4-chrome` causes descendants to inherit
 * the v4 paper/ink treatment. This lets us mount the v4 topbar
 * without repainting the whole editor.
 * =================================================================== */
.v4-chrome {
  color: var(--ink-v4);
  font-family: var(--sans-v4);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
.v4-chrome * { box-sizing: border-box; }

.v4-chrome button,
.v4-chrome input,
.v4-chrome select,
.v4-chrome textarea { font-family: inherit; color: inherit; }
.v4-chrome button { cursor: pointer; border: 0; background: transparent; }

.v4-chrome kbd {
  font-family: var(--mono-v4);
  font-size: 11px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-v4);
  padding: 1px 5px;
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--rule-v4);
  color: var(--ink-soft-v4);
}

/* ===================================================================
 * v4 chips (tag + status) — scoped to .v4-chrome so the v1 chip styles
 * in tw-design-tokens.css keep working outside the v4 chrome region.
 * =================================================================== */
.v4-chrome .tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono-v4);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.v4-chrome .tag-import   { background: var(--pool-import-bg);   color: var(--pool-import); }
.v4-chrome .tag-internal { background: var(--pool-internal-bg); color: var(--pool-internal); }
.v4-chrome .tag-external { background: var(--pool-external-bg); color: var(--pool-external); }
.v4-chrome .tag-gob      { background: var(--fmt-gob-bg);       color: var(--fmt-gob); }
.v4-chrome .tag-bbt      { background: var(--fmt-bbt-bg);       color: var(--fmt-bbt); }
.v4-chrome .tag-bbz      { background: var(--fmt-bbz-bg);       color: var(--fmt-bbz); }

.v4-chrome .chip-v4 {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans-v4);
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  line-height: 1.5;
}
.v4-chrome .chip-v4 .c-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.v4-chrome .chip-v4.draft    { color: #6B5F55;  background: #EFE8DB; }
.v4-chrome .chip-v4.review   { color: #2B5E8A;  background: #D6E4F0; }
.v4-chrome .chip-v4.rewrite  { color: #B06A14;  background: #FBEBD2; }
.v4-chrome .chip-v4.approved { color: #2E6B3E;  background: #DDEEDF; }
.v4-chrome .chip-v4.assigned { color: #3E4F87;  background: #DFE4F2; }
.v4-chrome .chip-v4.refresh  { color: #A86424;  background: #F7E4CE; }
.v4-chrome .chip-v4.retired  { color: #8A7F75;  background: #E8E2D4; }
.v4-chrome .chip-v4.rejected { color: #A83A2A;  background: #F7DCD6; }
.v4-chrome .chip-v4.legacy   { color: #6A5784;  background: #E5DEEE; }