/* =================================================================== * tw-design-tokens-v4.css - TriviaWorks Editor v4 token aliasing layer * * STATUS (2026-05-18, Arc A1 token aliasing): * This file historically owned the v4 chrome palette (--paper-*, * --ink-v4, --rule-v4, --gold-v4, --pool-*, --fmt-*, --q-*, ...). * It is now maintained as an ALIASING layer that redefines those * v4 names in terms of the canonical Arc tokens (tw-tokens.css, * semantic --surface-* / --text-* / --border-* / --accent-* / * --state-* / --radius-* / --elev-* / --ease-*) wherever an * equivalent exists. v4 names that have no Arc equivalent keep * their original value, flagged with a "TODO arc-token-equivalent" * comment at the declaration line. * * The Gotham + Gotham Narrow @font-face declarations and the * .v4-chrome / .tag / .chip-v4 rules at the bottom are preserved * verbatim - they continue to be the v4 chrome boundary. * * See _handoff/token-migration-plan-2026-05-18.md for the full * mapping table, kill-date, and grep recipe. * * Why aliasing rather than deletion: * v4-only surfaces (admin-ai-transcripts, admin-defaults, admin-users, * bbz_display, bbz_editor_v5, bbz_preview) load this file without * tw-tokens.css. We @import the canonical arc token file so those * surfaces still get the canonical --surface-* / --text-* / etc. * values defined. Surfaces that already load tw-tokens.css * separately are unaffected (idempotent @import). * * Mapping summary (v4 alias -> canonical arc name): * --paper -> --surface-base * --paper-sunk -> --surface-sunk * --paper-raised -> --surface-raised * --paper-hover -> --surface-overlay * --ink-v4 -> --text-primary * --ink-soft-v4 -> --text-secondary * --ink-muted-v4 -> --text-tertiary * --ink-faint-v4 -> (no arc equivalent; kept as own value) * --ink-ghost -> (no arc equivalent; kept as own value) * --rule-heavy -> --border-strong * --rule-v4 -> --border-subtle * --rule-soft -> --border-subtle * --rule-ghost -> (no arc equivalent; kept as own value) * --gold-v4 -> --accent-primary * --gold-deep -> --accent-primary-pressed * --gold-bright -> --accent-primary-hi * --gold-wash -> --accent-primary-bg * --gold-soft-bg -> (no arc equivalent; kept as own value - * arc --accent-primary-bg matches --gold-wash, not --gold-soft-bg) * --pool-internal -> arc @import provides identical value; * not redefined here * --pool-internal-bg -> kept as own value (#E1EFDD darker than arc * #F0F7EC) to preserve current chip-bg render. TODO. * --pool-internal-wash-> kept as own value (#F0F7EC, matches arc -bg). * --pool-external -> arc @import provides identical value; * not redefined here * --pool-external-bg -> kept as own value (#DFE4F2 darker). TODO. * --pool-external-wash-> kept as own value (#EDF0F9, matches arc -bg). * --pool-import / -bg / -wash -> (no arc equivalent; kept as own values) * --fmt-gob / --fmt-bbt / --fmt-bbz (and -bg) -> (no arc equivalent) * --q-diversity / --q-balance / --q-difficulty / --q-freshness -> * (Format Composer quality dims; no arc equivalent) * --good-v4 / --good-bg-v4 -> --state-success / --state-success-bg * --warn-v4 / --warn-bg-v4 -> --state-warning / --state-warning-bg * --danger-v4 / --danger-bg-v4 -> --state-error / --state-error-bg * --info-v4 / --info-bg-v4 -> --state-info / --state-info-bg * --serif-v4 / --sans-v4 -> --type-family-sans * --mono-v4 -> --type-family-mono * --r-xs -> --radius-xs * --r-sm-v4 -> --radius-sm * --r-md-v4 -> --radius-md * --r-lg-v4 -> --radius-lg * --r-xl -> --radius-xl * --shadow-xs-v4 / -sm-v4 / -md-v4 / -lg-v4 -> kept as own values * (warm-brown tint differs subtly from arc --elev-*; see comment * block at the declaration site) * --shadow-inset-v4 -> (no arc equivalent; kept as own value) * --ease-out -> --ease-emphasized (exact match) * --ease-in / --ease-io -> (no arc equivalent; kept as own values) * --stage-* (canvas brand) -> (intentional; arc does not own dark stage) * --white-dim -> (warm-cream solid for stage; arc has none) * =================================================================== */ /* The canonical arc token set. Idempotent @import - surfaces that already load tw-tokens.css separately are unaffected. */ @import url('/_shared/tw-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 (aliased to canonical arc surface tokens) ---------- */ /* DEPRECATED 2026-05-18: use var(--surface-base) instead of var(--paper) - migration scheduled */ --paper: var(--surface-base); /* DEPRECATED 2026-05-18: use var(--surface-sunk) instead of var(--paper-sunk) - migration scheduled */ --paper-sunk: var(--surface-sunk); /* DEPRECATED 2026-05-18: use var(--surface-raised) instead of var(--paper-raised) - migration scheduled */ --paper-raised: var(--surface-raised); /* DEPRECATED 2026-05-18: use var(--surface-overlay) instead of var(--paper-hover) - migration scheduled */ --paper-hover: var(--surface-overlay); /* ---------- Stage (canvas surface - brand pays rent here) ---------- TODO arc-token-equivalent: arc does not own the dark stage palette. Stage tokens are intentionally retained at their own hex values. */ --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. TODO arc-token-equivalent: stage-bound token; no arc equivalent. */ --white-dim: #908C80; /* ---------- Ink (aliased to canonical arc text tokens) ---------- */ /* DEPRECATED 2026-05-18: use var(--text-primary) instead of var(--ink-v4) - migration scheduled */ --ink-v4: var(--text-primary); /* DEPRECATED 2026-05-18: use var(--text-secondary) instead of var(--ink-soft-v4) - migration scheduled */ --ink-soft-v4: var(--text-secondary); /* DEPRECATED 2026-05-18: use var(--text-tertiary) instead of var(--ink-muted-v4) - migration scheduled */ --ink-muted-v4: var(--text-tertiary); /* 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. TODO arc-token-equivalent: arc has no token lighter than --text-tertiary while still meeting the contrast bar. Keep own values. */ --ink-faint-v4: #73685E; --ink-ghost: #716A61; /* ---------- Lines (partial arc coverage) ---------- */ /* DEPRECATED 2026-05-18: use var(--border-strong) instead of var(--rule-heavy) - migration scheduled */ --rule-heavy: var(--border-strong); /* DEPRECATED 2026-05-18: use var(--border-subtle) instead of var(--rule-v4) - migration scheduled */ --rule-v4: var(--border-subtle); /* DEPRECATED 2026-05-18: use var(--border-subtle) instead of var(--rule-soft) - migration scheduled (rule-soft and rule-v4 historically had different hex values but converge onto --border-subtle semantically. If a future surface needs the finer distinction, introduce an arc --border-faint token first.) */ --rule-soft: var(--border-subtle); /* TODO arc-token-equivalent: --rule-ghost is the lightest rule and has no arc match. */ --rule-ghost: #F5EEDD; /* ---------- Brand system (aliased to canonical arc accent tokens) ---------- */ /* DEPRECATED 2026-05-18: use var(--accent-primary) instead of var(--gold-v4) - migration scheduled */ --gold-v4: var(--accent-primary); /* DEPRECATED 2026-05-18: use var(--accent-primary-pressed) instead of var(--gold-deep) - migration scheduled */ --gold-deep: var(--accent-primary-pressed); /* DEPRECATED 2026-05-18: use var(--accent-primary-hi) instead of var(--gold-bright) - migration scheduled */ --gold-bright: var(--accent-primary-hi); /* TODO arc-token-equivalent: --gold-soft-bg is a mid-tint that sits between --accent-primary and --accent-primary-bg. Arc has no equivalent slot. Keep own value. */ --gold-soft-bg: #F7EDD1; /* DEPRECATED 2026-05-18: use var(--accent-primary-bg) instead of var(--gold-wash) - migration scheduled */ --gold-wash: var(--accent-primary-bg); /* ---------- Pool accents ---------- Name overlap with arc: --pool-internal / --pool-external have identical values across arc and v4 (#3B6B4A / #3E4F87). The arc @import above already defines them; we do not redefine here. --pool-internal-bg / --pool-external-bg DIFFER: v4 uses a slightly darker chip-bg shade (E1EFDD / DFE4F2), arc uses the lighter wash (F0F7EC / EDF0F9). The v4 darker shade is the background that real chip consumers (.v4-chrome .tag-* and tw-components.css .tw-chip-pool-*) currently render against. Keep the v4 value here to avoid visual regression on chip-bg; the kill-date is when those chip rules migrate to the arc wash explicitly. --pool-internal-wash / --pool-external-wash were v4-only and happen to equal the arc -bg value. Alias them through arc so both v1 chip and v4 wash flow from one source. */ /* TODO arc-token-equivalent: --pool-import has no arc match (arc covers internal / external / archive only). */ --pool-import: #B15C1E; --pool-import-bg: #FBE8D8; --pool-import-wash: #FDF2E6; /* TODO arc-token-equivalent: v4 --pool-internal-bg is darker than arc --pool-internal-bg. Keep v4 value; consumers (.v4-chrome .tag-internal, .tw-chip-pool-internal) currently render against this shade. Migrate consumers explicitly when ready to converge. */ --pool-internal-bg: #E1EFDD; /* DEPRECATED 2026-05-18: use var(--pool-internal-bg) instead of var(--pool-internal-wash) - migration scheduled (v4 wash value #F0F7EC equals arc --pool-internal-bg exactly.) */ --pool-internal-wash: #F0F7EC; /* TODO arc-token-equivalent: v4 --pool-external-bg is darker than arc --pool-external-bg. See --pool-internal-bg comment above. */ --pool-external-bg: #DFE4F2; /* DEPRECATED 2026-05-18: use var(--pool-external-bg) instead of var(--pool-external-wash) - migration scheduled (v4 wash value #EDF0F9 equals arc --pool-external-bg exactly.) */ --pool-external-wash: #EDF0F9; /* ---------- Format accents ---------- TODO arc-token-equivalent: format-specific tints (GoB purple, BBT teal, BBZ amber) have no arc equivalent. Keep own values. */ --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) ---------- TODO arc-token-equivalent: Format Composer's per-dimension hues have no arc equivalent. Keep own values. */ --q-diversity: #2A6A72; --q-balance: #5E4A8E; --q-difficulty: #8E4A3C; --q-freshness: #4A7A3A; /* ---------- Semantic (aliased to canonical arc state tokens) ---------- */ /* DEPRECATED 2026-05-18: use var(--state-success) instead of var(--good-v4) - migration scheduled */ --good-v4: var(--state-success); /* DEPRECATED 2026-05-18: use var(--state-success-bg) instead of var(--good-bg-v4) - migration scheduled */ --good-bg-v4: var(--state-success-bg); /* DEPRECATED 2026-05-18: use var(--state-warning) instead of var(--warn-v4) - migration scheduled */ --warn-v4: var(--state-warning); /* DEPRECATED 2026-05-18: use var(--state-warning-bg) instead of var(--warn-bg-v4) - migration scheduled */ --warn-bg-v4: var(--state-warning-bg); /* DEPRECATED 2026-05-18: use var(--state-error) instead of var(--danger-v4) - migration scheduled */ --danger-v4: var(--state-error); /* DEPRECATED 2026-05-18: use var(--state-error-bg) instead of var(--danger-bg-v4) - migration scheduled */ --danger-bg-v4: var(--state-error-bg); /* DEPRECATED 2026-05-18: use var(--state-info) instead of var(--info-v4) - migration scheduled */ --info-v4: var(--state-info); /* DEPRECATED 2026-05-18: use var(--state-info-bg) instead of var(--info-bg-v4) - migration scheduled */ --info-bg-v4: var(--state-info-bg); /* ---------- Type (aliased to canonical arc type-family tokens) ---------- 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. Arc --type-family-sans uses the same intent. */ /* DEPRECATED 2026-05-18: use var(--type-family-sans) instead of var(--serif-v4) - migration scheduled */ --serif-v4: var(--type-family-sans); /* DEPRECATED 2026-05-18: use var(--type-family-sans) instead of var(--sans-v4) - migration scheduled */ --sans-v4: var(--type-family-sans); /* DEPRECATED 2026-05-18: use var(--type-family-mono) instead of var(--mono-v4) - migration scheduled */ --mono-v4: var(--type-family-mono); /* ---------- Shape (aliased to canonical arc radius tokens) ---------- v4 wanted slightly rounder 5/8/12/18 vs v1's 4/7/10. The arc set is 3/5/8/12/18 (xs/sm/md/lg/xl) which matches v4 exactly. */ /* DEPRECATED 2026-05-18: use var(--radius-xs) instead of var(--r-xs) - migration scheduled */ --r-xs: var(--radius-xs); /* DEPRECATED 2026-05-18: use var(--radius-sm) instead of var(--r-sm-v4) - migration scheduled Also note: --r-sm in tw-design-tokens.css (v1) now aliases to --radius-sm too, resolving the historical 4px (v1) vs 5px (v4) conflict by routing both through the arc canonical (5px). */ --r-sm-v4: var(--radius-sm); /* DEPRECATED 2026-05-18: use var(--radius-md) instead of var(--r-md-v4) - migration scheduled */ --r-md-v4: var(--radius-md); /* DEPRECATED 2026-05-18: use var(--radius-lg) instead of var(--r-lg-v4) - migration scheduled */ --r-lg-v4: var(--radius-lg); /* DEPRECATED 2026-05-18: use var(--radius-xl) instead of var(--r-xl) - migration scheduled */ --r-xl: var(--radius-xl); /* ---------- Shadows ---------- TODO arc-token-equivalent: v4 shadows use rgba(40,28,12,...) (warm brown tint) and arc --elev-* uses rgba(28,20,16,...) (matches arc --text-primary). Same compositing geometry, slightly different tint warmth. Kept as own values to avoid a subtle visual shift on every elevated surface. Migrate consumers to --elev-* explicitly (Section M of UX repair queue) when ready. */ --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); /* TODO arc-token-equivalent: --shadow-inset-v4 is a positive-inset highlight (not a drop shadow). Arc has no equivalent. */ --shadow-inset-v4: inset 0 1px 0 rgba(255,255,255,0.6); /* ---------- Motion ---------- v4 --ease-out value matches arc --ease-emphasized exactly. */ /* DEPRECATED 2026-05-18: use var(--ease-emphasized) instead of var(--ease-out) - migration scheduled */ --ease-out: var(--ease-emphasized); /* TODO arc-token-equivalent: --ease-in / --ease-io have no arc match (arc tokenises enter / exit / standard / emphasized). Keep own values. */ --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-io: cubic-bezier(0.76, 0, 0.24, 1); /* ---------- Track A additions (2026-06-10) ---------- Two previously-phantom names promoted to real tokens. Several chrome sites wrote var(--surface, #f4f0eb) / var(--rule-focus-v4, #b8af9a) against names that were never defined anywhere, so the fallback hex always won and the surface could not follow the theme. The light values below equal those fallbacks EXACTLY (byte-identical light render); the dark block at the bottom of this file themes them. Consumers are being migrated to these names (Track A phase 2). */ --paper-canvas: #f4f0eb; --rule-focus: #b8af9a; } /* =================================================================== * 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; } /* =================================================================== * Dark-theme values for the v4 literals (Track A, 2026-06-10). * * Aliased v4 names follow the theme through their arc tokens. The * literal-valued names below ("TODO arc-token-equivalent" sites) and * the two Track A additions would otherwise stay light-tuned inside * [data-theme="dark"]. Stage tokens (--stage-*, --white-dim) are brand * surfaces and intentionally do NOT flip. Zero effect in light mode. * Dark chip-v4 colours live on the .v4-chrome rules below this block. * =================================================================== */ html[data-theme="dark"] { --paper-canvas: #111318; /* Contrast pass 2026-06-10: --rule-focus matches dark --border-strong (4.8:1 on raised) so focused input borders read clearly; --rule-ghost is the faintest decorative rule tier (2.7:1 on base), deliberately below --line-soft and --border-subtle. */ --rule-focus: #8B94A4; --ink-faint-v4: #969CA7; --ink-ghost: #8E95A1; --rule-ghost: #565D6B; --gold-soft-bg: #332B12; --pool-import: #E8A06A; --pool-import-bg: #2A1D13; --pool-import-wash: #231910; --pool-internal-bg: #16271B; --pool-internal-wash:#16271B; --pool-external-bg: #181D2D; --pool-external-wash:#181D2D; --fmt-gob: #C49BD8; --fmt-gob-bg: #261A2B; --fmt-bbt: #6FB8D8; --fmt-bbt-bg: #12222B; --fmt-bbz: #E89A7A; --fmt-bbz-bg: #2A1812; --q-diversity: #6FC4CE; --q-balance: #A99BD8; --q-difficulty: #D89A8A; --q-freshness: #93C47D; --shadow-xs-v4: 0 1px 0 rgba(0,0,0,0.3); --shadow-sm-v4: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.03); --shadow-md-v4: 0 6px 20px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5); --shadow-lg-v4: 0 24px 64px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.5); --shadow-inset-v4: inset 0 1px 0 rgba(255,255,255,0.05); } /* v4 status chips hard-code their light pastel pairs above; restate the * pairs from the themed v1 --st-* palette in dark so chip text can never * sit light-on-light inside a dark editor. */ html[data-theme="dark"] .v4-chrome .chip-v4.draft { color: var(--st-draft, #A0A5AE); background: var(--st-draft-bg, #23262C); } html[data-theme="dark"] .v4-chrome .chip-v4.review { color: var(--st-review, #79ABF2); background: var(--st-review-bg, #141C2B); } html[data-theme="dark"] .v4-chrome .chip-v4.rewrite { color: var(--st-rewrite, #E8A554); background: var(--st-rewrite-bg, #2A2113); } html[data-theme="dark"] .v4-chrome .chip-v4.approved { color: var(--st-approved, #7DD18B); background: var(--st-approved-bg, #16271B); } html[data-theme="dark"] .v4-chrome .chip-v4.assigned { color: var(--st-assigned, #6EC6D8); background: var(--st-assigned-bg, #12252A); } html[data-theme="dark"] .v4-chrome .chip-v4.refresh { color: var(--st-refresh, #E89A6A); background: var(--st-refresh-bg, #2A1D13); } html[data-theme="dark"] .v4-chrome .chip-v4.retired { color: var(--st-retired, #9298A3); background: var(--st-retired-bg, #1F2228); } html[data-theme="dark"] .v4-chrome .chip-v4.rejected { color: var(--st-rejected, #F08577); background: var(--st-rejected-bg, #2B1714); } html[data-theme="dark"] .v4-chrome .chip-v4.legacy { color: var(--st-legacy, #A99BD8); background: var(--st-legacy-bg, #221C33); }