/* ═══════════════════════════════════════════════════════════════════════════ theme.css — ALL24 theme token layer Path: /assets/css/theme.css · Loads FIRST in the core bundle. Single source of truth for every themeable colour in the app. THE CONTRACT ──────────── 1. Dark is the default, and every dark value here is byte-identical to what the app hardcoded before tokenisation. Adding this file changes nothing. 2. A theme is a VALUE SET, not a stylesheet. Never fork a rule per theme — add a token, override the value. If you find yourself writing `[data-theme="light"] .some-class { ... }` for anything other than a genuine structural difference, you want a new token instead. 3. Never hardcode a colour in a component stylesheet. If no token fits, add one here first. 4. This file declares VALUES ONLY — no selectors, no component rules. It loads first in the core bundle, so any rule placed here would lose to every stylesheet after it. Apply tokens in the component's own file. THE INK CHANNEL ─────────────── The app's dominant idiom is `rgba(255,255,255,.09)` — "ink laid over the surface at N opacity" for borders, hovers and washes. That is semantic, not literal white, so it converts mechanically: rgba(255,255,255,.09) → rgba(var(--ink-rgb),.09) --ink-rgb flips per theme. --shadow-rgb does NOT: shadows stay dark in every theme, so `rgba(0,0,0,.3)` on a box-shadow becomes rgba(var(--shadow-rgb),.3) and keeps its value. Do not conflate the two. ADDING A THEME ────────────── Copy the [data-theme="light"] block, rename, override what differs. Anything you leave out inherits the dark value, which is a feature: a theme can keep the film player dark simply by not overriding --film-* . ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ DARK — the default. Values match pre-tokenisation production exactly. ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { /* ── Rail ──────────────────────────────────────────────────────────────── These four lived ONLY in the dark-island block, whose selector is `[data-theme] :is(...)` — it needs a data-theme attribute to match, and production never sets one. So they resolved to nothing and `.rail-sep { background: var(--rail-sep) }` painted no background at all, blanking the dividers. A token used anywhere must have a :root default; the island is an override, not a definition. The rail carries a gradient now rather than a flat fill — light mode already had one and dark did not. Deep slate to near-black: enough to give the rail some depth without competing with the app content beside it. */ --rail-surface: linear-gradient(180deg, #1a212b 0%, #0f1319 100%); --rail-sep: rgba(255,255,255,.56); --rail-ink: rgba(255,255,255,.7); --rail-ink-strong: #ffffff; /* ── Channels ──────────────────────────────────────────────────────────── --ink-rgb : foreground laid over the surface. Flips per theme. --shadow-rgb: drop-shadow black. Stays 0,0,0 in every theme. */ --ink-rgb: 255,255,255; --shadow-rgb: 0,0,0; /* Channel forms of the brand and status colours, for the tinted-wash idiom: rgba(59,130,246,.35) → rgba(var(--team-rgb),.35) Keep each in step with its hex counterpart further down. */ --accent-rgb: 75,156,211; --accent-glow-rgb: 73,178,227; --team-rgb: 59,130,246; --ok-rgb: 34,197,94; --warn-rgb: 234,179,8; --danger-rgb: 239,68,68; --danger-legacy-rgb: 234,61,61; /* ── Surfaces ─────────────────────────────────────────────────────────── canvas : the page itself surface : cards, sheets, raised panels surface-2 : the rail and other recessed chrome surface-3 : wells, thumbnails, inset slots panel : the slide-out sidebar panel (translucent) */ --canvas: #070a10; --canvas-plain: #000; /* app.css legacy --bg, non-dashboard pages */ --surface: #0f141d; --surface-2: #111214; --surface-3: #0a0e16; --surface-alt: #111; /* login/auth cards, misc #111 fills */ --panel: rgba(21,22,24,.9); --panel-solid: #222; /* app.css legacy --panel */ --panel-alt: rgba(15,20,29,.95); --surface-raised: #1c1d20; /* rail hover / raised chrome */ --surface-sunk: #1a1b1e; --surface-deep: #0c1018; --surface-hdr: #111827; /* dashboard header gradient top */ /* ── Border ladder ────────────────────────────────────────────────────── Borders cannot ride --ink-rgb: the hue flips correctly but the WEIGHT does not. A light hairline on a dark card reads at .05; a dark hairline on a white card needs roughly double to read the same. Each rung is named for its dark alpha and keeps that value exactly, so dark is unchanged; light carries the heavier tuned alpha. Use these for borders and outlines ONLY — backgrounds and washes stay on the ink channel. */ --bd-03: rgba(255,255,255,.03); --bd-04: rgba(255,255,255,.04); --bd-05: rgba(255,255,255,.05); --bd-06: rgba(255,255,255,.06); --bd-07: rgba(255,255,255,.07); --bd-08: rgba(255,255,255,.08); --bd-09: rgba(255,255,255,.09); --bd-10: rgba(255,255,255,.10); --bd-12: rgba(255,255,255,.12); --bd-14: rgba(255,255,255,.14); --bd-15: rgba(255,255,255,.15); --bd-16: rgba(255,255,255,.16); --bd-18: rgba(255,255,255,.18); --bd-20: rgba(255,255,255,.20); --bd-25: rgba(255,255,255,.25); --bd-26: rgba(255,255,255,.26); --bd-28: rgba(255,255,255,.28); --bd-30: rgba(255,255,255,.30); --bd-40: rgba(255,255,255,.40); --bd-50: rgba(255,255,255,.50); --bd-70: rgba(255,255,255,.70); /* ── Lines ─────────────────────────────────────────────────────────────── */ --border: rgba(255,255,255,.05); --border-strong: rgba(255,255,255,.1); --border-rail: rgba(255,255,255,.08); /* ── Text ─────────────────────────────────────────────────────────────── primary → secondary → muted → dim, decreasing emphasis. --text-on-accent is for text sitting ON an --accent fill. */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --text-dim: #475569; --text-plain: #fff; /* app.css legacy --fg */ --text-soft: #9aa4ad; /* app.css legacy --muted */ --text-on-accent: #04141f; /* Legacy chrome greys, preserved at their exact shipped values so dark stays byte-identical. --text-bright/-chip/-faint are all "high-emphasis text on dark chrome" and differ by only a few percent; they are prime candidates to collapse onto the ladder above once someone signs off on a sub-perceptual shift in dark. Do not add more of these. */ --text-bright: #e8e8e8; /* panel headings */ --text-chip: #d1d2d3; /* chip / pill labels */ --text-faint: #ababad; /* de-emphasised rail text */ /* ── Brand ────────────────────────────────────────────────────────────── --accent : Carolina blue, used as a FILL. Do not use for body text on a light surface — it only clears 3:1 there. --accent-ink : contrast-safe accent for text and icons. Identical to --accent in dark; darkened in light themes. --accent-glow: the #49b2e3 variant already in sidebar.css / app.css. Kept distinct so dark stays byte-identical — see the note at the bottom of this file. */ --accent: #4B9CD3; --accent-ink: #4B9CD3; --accent-glow: #49b2e3; /* ── Team colour (overridden per team at runtime) ───────────────────────── */ --team: #3b82f6; --team-2: #2563eb; --team-light: #60a5fa; /* links, active labels on dark chrome */ --team-bright: #6396ff; --team-bright-rgb: 99,150,255; /* ── Status ─────────────────────────────────────────────────────────────── */ --ok: #22c55e; --warn: #eab308; --danger: #ef4444; --info: #4B9CD3; --ok-legacy: #19c37d; /* app.css legacy --ok */ --danger-legacy: #ea3d3d; /* app.css legacy --danger */ /* ── Interaction ────────────────────────────────────────────────────────── */ --surface-well: #05080e; /* logo tiles, deep inset wells */ /* Soft status text — pastels for text on dark tinted chips */ --ok-soft: #86efac; --danger-soft: #f87171; --warn-soft: #fbbf24; --team-soft: #93bbfc; --hover: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); --hover-border: rgba(255,255,255,.15); --hover-flat: rgba(255,255,255,.06); /* ── Elevation ──────────────────────────────────────────────────────────── */ --shadow-1: 0 2px 6px rgba(0,0,0,.25); --shadow-2: 0 4px 16px rgba(0,0,0,.30); --shadow-3: 0 10px 30px rgba(0,0,0,.35); /* ── Huddle / film chrome (the --hud-* vocabulary) ────────────────────── Declared here, not in huddle.css, because film.css and sidebar.css consume these names too. huddle.css used to own them at :root while loading last from footer.php, which meant film's own fallbacks never applied and the film module silently wore the huddle palette. Dark values below are that palette exactly, so nothing changes in dark. The last five were never declared anywhere; their film.css fallbacks are the real shipped values and are pinned here so they stop being invisible. */ --hud-bg: #0a0e16; --hud-bg-side: #070a10; --hud-bg-hover: rgba(255,255,255,.03); --hud-bg-active: rgba(255,255,255,.06); --hud-border: rgba(255,255,255,.06); --hud-text: #cbd5e1; --hud-text-dim: #64748b; --hud-text-bright: #f1f5f9; --hud-accent: var(--team-color, #3b82f6); --hud-green: #22c55e; --hud-compose-bg: #0f141d; --hud-compose-bd: rgba(255,255,255,.1); --hud-compose-focus: var(--team-color, #3b82f6); --hud-msg-hover: rgba(255,255,255,.02); --hud-pill-bg: rgba(255,255,255,.05); --hud-danger: #ef4444; /* Film/huddle chrome depth. Dark already separates well (#070a10 side vs #0a0e16 shell vs #1a1d21 surface), so these stay flat colours here; light needs an actual gradient or every surface collapses into one white. */ --hud-side-grad: #070a10; --hud-rail: #070a10; --hud-rail-grad: #070a10; --hud-active-bg: #4B9CD3; --hud-active-ink: #fff; --hud-bg-float: #2c2c34; --hud-surface: #1a1d21; --hud-surface-raised: #222529; --hud-text-muted: #9a9b9d; --hud-text-secondary: #aab; /* ── Film tree levels + grid ──────────────────────────────────────────── The tree reads as a hierarchy through SHADE, not indentation alone: season band -> game row -> recessed bins well -> colour-coded bin -> leaf Dark values below are exactly what shipped. */ --film-season-bg: rgba(56,139,255,.12); --film-season-bg-hover: rgba(56,139,255,.18); --film-season-bd: #388bff; --film-season-ink: #7bb8ff; --film-game-bg: rgba(255,255,255,.06); --film-game-btn-bg: rgba(255,255,255,.04); --film-game-btn-hover: rgba(255,255,255,.08); --film-bins-bg: #0d0f13; --film-th-bg: #111318; --film-row-alt: rgba(255,255,255,.02); --film-row-hover: rgba(255,255,255,.06); --film-row-active: rgba(18,100,163,.25); /* Bin types. Ink is a pastel on dark; it must go DARK in light or the label disappears into its own tint. */ --bin-game-ink: #6ee7a0; --bin-game-bg: rgba(74,222,128,.1); --bin-practice-ink: #fde047; --bin-practice-bg: rgba(250,204,21,.1); --bin-scout-ink: #fb923c; --bin-scout-bg: rgba(249,115,22,.1); --bin-custom-ink: #b89aff; --bin-custom-bg: rgba(167,139,250,.1); --bin-other-ink: #a1b0c4; --bin-other-bg: rgba(148,163,184,.08); /* ── Folder tree (the real sidebar structure) ─────────────────────────── Group band -> folder row -> recessed well -> leaf. Dark values are exactly what shipped. */ --fold-band-bg: rgba(255,255,255,.04); --fold-band-bd: rgba(200,210,220,.45); --fold-band-ink: rgba(255,255,255,.85); /* The chevron and the cut-ups label carry their own colours. Routing them through tokens (rather than forking the rule per theme) lets light turn them white while dark keeps exactly what it had. */ --fold-band-chevron: #64748b; --fold-band-label: #fb923c; --fold-band-count-bg: rgba(255,255,255,.07); --fold-band-count-ink: #ababad; --fold-row-bg: rgba(255,255,255,.05); --fold-row-bd: rgba(200,210,220,.35); --fold-row-ink: rgba(255,255,255,.85); --fold-well: #0d0f13; --fold-icon: #60a5fa; /* folder glyphs carry brand blue, not dim grey */ /* Playlist leaves. Dark ships them flush and transparent; light needs a real surface and a visible gap or the rows merge into one grey mass. */ --pl-item-bg: transparent; --pl-item-gap: 1px; --pl-item-bd: rgba(255,255,255,.06); --mc-ink: #8fc3e6; --fold-leaf-bd: rgba(200,210,220,.2); --count-bg: rgba(255,255,255,.07); --count-ink: #ababad; /* ── Calm panel ───────────────────────────────────────────────────────── Dark values reproduce what shipped, except where the redesign deliberately quietens a level (folders and leaves lose their fills in BOTH themes — that is the point of the change). */ --tree-guide: rgba(255,255,255,.13); --tree-sec-bg: #4B9CD3; --tree-sec-bg-hover: #3d8bc2; --tree-sec-ink: #ffffff; --tree-sec-bd: #0a0a0b; --tree-sec-count-bg: rgba(0,0,0,.24); --tree-sub-ink: #64748b; --tree-leaf-ink: #c3ccd8; --tree-leaf-hover: rgba(255,255,255,.07); --tree-count: #7c8899; --tree-thumb-bg: #4B9CD3; --tree-thumb-bd: #6cb2e0; --tree-thumb-ink: #ffffff; --tree-game-ink: #4B9CD3; /* Segmented control (All / O / D / S above the clip grid). */ --seg-bg: #0f141d; --seg-bd: rgba(255,255,255,.15); --seg-ink: #94a3b8; --seg-hover: rgba(255,255,255,.08); --seg-active-bg: #4B9CD3; --seg-active-ink: #ffffff; /* ── Sunken ladder ────────────────────────────────────────────────── "Make this darker than its parent" — tabs, wells, scrims, inactive toggles. Distinct from --shadow-rgb, which is for DROP SHADOWS and must never flip. Black reads far stronger on a light surface, so each rung keeps its exact dark alpha and drops sharply in light. */ --sunk-05: rgba(0,0,0,.05); --sunk-10: rgba(0,0,0,.10); --sunk-12: rgba(0,0,0,.12); --sunk-15: rgba(0,0,0,.15); --sunk-20: rgba(0,0,0,.20); --sunk-25: rgba(0,0,0,.25); --sunk-30: rgba(0,0,0,.30); --sunk-35: rgba(0,0,0,.35); --sunk-40: rgba(0,0,0,.40); --sunk-50: rgba(0,0,0,.50); --sunk-55: rgba(0,0,0,.55); --sunk-60: rgba(0,0,0,.60); --sunk-62: rgba(0,0,0,.62); --sunk-65: rgba(0,0,0,.65); --sunk-70: rgba(0,0,0,.70); --sunk-72: rgba(0,0,0,.72); --sunk-80: rgba(0,0,0,.80); /* ── Playbook module ──────────────────────────────────────────────── playbook.css carries its own surface palette. Dark values are the exact shipped literals. Route/field colours are CONTENT drawn on a play diagram and are deliberately NOT tokenised. */ --pb-canvas: #070a12; --pb-library: #0c0f14; --pb-card: #0a0a0a; --pb-surface: #0f141b; --pb-surface-2: #0c1220; --pb-raised: #121926; --pb-raised-2: #1a1d28; --pb-raised-3: #1e2230; --pb-chrome: #0a0b0d; --pb-ink: #e8eef6; --pb-ink-dim: #9ca3af; /* ── Paper ────────────────────────────────────────────────────────── A white sheet — play cards, diagrams, documents, print previews. Paper does NOT flip: it is white in every theme, exactly as the film player is black in every theme. Use these for surfaces that were hardcoded #fff; do NOT use --text-* for a background, those invert and will turn the surface black in light. */ --paper: #ffffff; --paper-2: #f1f5f9; --paper-3: #f0f1f3; --paper-ink: #0a0a0a; /* Playbook accents tuned to glow on near-black; they measure below 3:1 on a pale surface, so light gets contrast-safe values. */ --pb-amber: rgba(255,200,80,.85); --pb-green: rgba(74,222,128,.95); --pb-green2: rgba(74,252,140,.95); /* ── Module palettes ──────────────────────────────────────────────── Near-black surface literals several modules ship privately. Dark values are byte-identical to what shipped; light steps them onto the light ramp so a module cannot stay dark inside a light app. */ --mod-abyss: #07090e; --mod-abyss-2: #070a12; --mod-deep: #0b0d10; --mod-deep-2: #0c1220; --mod-sunk: #0e1422; --mod-sunk-2: #0e131c; --mod-sunk-3: #0b0f17; --mod-raised: #1a2030; --mod-raised-2: #1f2937; --mod-ink: #d3d9e1; --mod-ink-2: #c2cad5; --mod-ink-3: #e9eef4; /* ── Auto-derived surfaces ────────────────────────────────────────── Dark background literals found across the modules. Dark values are byte-identical; light values invert each one's DEPTH onto the light ramp (deepest -> canvas, most-raised -> white). Machine-generated; fold into hand-named tokens when a module gets a proper design pass. */ --auto-020617: #020617; --auto-04060a: #04060a; --auto-04141d: #04141d; --auto-05070c: #05070c; --auto-06131c: #06131c; --auto-080a0f: #080a0f; --auto-080b12: #080b12; --auto-080c13: #080c13; --auto-0a0b0d: #0a0b0d; --auto-0a0b0e: #0a0b0e; --auto-0a0e14: #0a0e14; --auto-0a0e15: #0a0e15; --auto-0a0f17: #0a0f17; --auto-0a1220: #0a1220; --auto-0b0b0b: #0b0b0b; --auto-0b0d10: #0b0d10; --auto-0b0e13: #0b0e13; --auto-0b0f14: #0b0f14; --auto-0b0f16: #0b0f16; --auto-0b1017: #0b1017; --auto-0b1119: #0b1119; --auto-0c0e12: #0c0e12; --auto-0c1118: #0c1118; --auto-0c1119: #0c1119; --auto-0c111a: #0c111a; --auto-0d0d0d: #0d0d0d; --auto-0d0f14: #0d0f14; --auto-0d1014: #0d1014; --auto-0d1017: #0d1017; --auto-0d1117: #0d1117; --auto-0d1118: #0d1118; --auto-0d1218: #0d1218; --auto-0d121b: #0d121b; --auto-0d1319: #0d1319; --auto-0e0e10: #0e0e10; --auto-0e0f12: #0e0f12; --auto-0e0f13: #0e0f13; --auto-0e141f: #0e141f; --auto-0e1b28: #0e1b28; --auto-0f0f10: #0f0f10; --auto-0f1114: #0f1114; --auto-0f1115: #0f1115; --auto-0f1117: #0f1117; --auto-0f1218: #0f1218; --auto-0f1219: #0f1219; --auto-0f141b: #0f141b; --auto-0f1520: #0f1520; --auto-0f1722: #0f1722; --auto-101010: #101010; --auto-10141c: #10141c; --auto-10161f: #10161f; --auto-10182a: #10182a; --auto-111216: #111216; --auto-111317: #111317; --auto-111318: #111318; --auto-111418: #111418; --auto-11151d: #11151d; --auto-121212: #121212; --auto-12122a: #12122a; --auto-12161f: #12161f; --auto-121722: #121722; --auto-121822: #121822; --auto-121823: #121823; --auto-121b28: #121b28; --auto-131313: #131313; --auto-13161c: #13161c; --auto-13161e: #13161e; --auto-131923: #131923; --auto-141414: #141414; --auto-14171c: #14171c; --auto-141720: #141720; --auto-14181d: #14181d; --auto-141a22: #141a22; --auto-141b23: #141b23; --auto-141b25: #141b25; --auto-151515: #151515; --auto-151528: #151528; --auto-15181c: #15181c; --auto-15191c: #15191c; --auto-161616: #161616; --auto-16161a: #16161a; --auto-16191f: #16191f; --auto-161922: #161922; --auto-161b22: #161b22; --auto-161b24: #161b24; --auto-161c27: #161c27; --auto-161d2a: #161d2a; --auto-181818: #181818; --auto-181a1e: #181a1e; --auto-181b22: #181b22; --auto-182029: #182029; --auto-19171d: #19171d; --auto-191919: #191919; --auto-1a1411: #1a1411; --auto-1a1a1a: #1a1a1a; --auto-1a1a2e: #1a1a2e; --auto-1a1c22: #1a1c22; --auto-1a1d21: #1a1d21; --auto-1a1d24: #1a1d24; --auto-1a1e26: #1a1e26; --auto-1a1f2b: #1a1f2b; --auto-1a1f2e: #1a1f2e; --auto-1a2433: #1a2433; --auto-1a3228: #1a3228; --auto-1b1b1b: #1b1b1b; --auto-1b1e24: #1b1e24; --auto-1c1c1c: #1c1c1c; --auto-1d1d1d: #1d1d1d; --auto-1d1f24: #1d1f24; --auto-1d2230: #1d2230; --auto-1d2532: #1d2532; --auto-1e1e1e: #1e1e1e; --auto-1e1e22: #1e1e22; --auto-1e1e24: #1e1e24; --auto-1e1e34: #1e1e34; --auto-1e2024: #1e2024; --auto-1e2028: #1e2028; --auto-1e2128: #1e2128; --auto-1e2130: #1e2130; --auto-1e2228: #1e2228; --auto-1e2230: #1e2230; --auto-1e2233: #1e2233; --auto-1e2433: #1e2433; --auto-1e2a31: #1e2a31; --auto-1f1f1f: #1f1f1f; --auto-1f2937: #1f2937; --auto-222228: #222228; --auto-22242a: #22242a; --auto-222529: #222529; --auto-23272c: #23272c; --auto-252525: #252525; --auto-252937: #252937; --auto-262626: #262626; --auto-262830: #262830; --auto-2a1515: #2a1515; --auto-2a2d31: #2a2d31; --auto-2a3942: #2a3942; --auto-2c2c2c: #2c2c2c; --auto-2c2c34: #2c2c34; --auto-2c2d30: #2c2d30; --auto-2d3a2d: #2d3a2d; --auto-2e3238: #2e3238; --auto-2e3345: #2e3345; --auto-333: #333; --auto-334: #334; --auto-363c50: #363c50; --auto-383d52: #383d52; /* Dark literals that were hiding inside module token declarations (e.g. `--team-bg: #0b0b0b`), invisible to a background-property scan. */ --auto-06080c: #06080c; --auto-070a0f: #070a0f; --auto-0d1219: #0d1219; --auto-0e1116: #0e1116; --auto-11161d: #11161d; --auto-171d24: #171d24; --auto-222a36: #222a36; /* ── Auto-derived ink ─────────────────────────────────────────────── Light text literals tuned for dark chrome. Dark values are byte-identical; light values invert LIGHTNESS onto the ink ramp so the emphasis order is preserved (brightest on dark -> darkest on light) rather than the absolute value. */ --ink-999: #999; --ink-9a9a9a: #9a9a9a; --ink-9a9b9d: #9a9b9d; --ink-9aa6b2: #9aa6b2; --ink-9aa7b1: #9aa7b1; --ink-9aa7b2: #9aa7b2; --ink-9aa7b4: #9aa7b4; --ink-9fb0c0: #9fb0c0; --ink-aaa: #aaa; --ink-aab: #aab; --ink-aab4bf: #aab4bf; --ink-aeb9c2: #aeb9c2; --ink-b3bdc8: #b3bdc8; --ink-b9c0c7: #b9c0c7; --ink-bbb: #bbb; --ink-c0c4ca: #c0c4ca; --ink-c7d2df: #c7d2df; --ink-c8cad0: #c8cad0; --ink-c8d8e6: #c8d8e6; --ink-ccc: #ccc; --ink-cdd3e0: #cdd3e0; --ink-cfd6db: #cfd6db; --ink-cfd8e3: #cfd8e3; --ink-d0d0d0: #d0d0d0; --ink-d0d0e0: #d0d0e0; --ink-d0d0e4: #d0d0e4; --ink-d4d9de: #d4d9de; --ink-d6dee4: #d6dee4; --ink-d9e2ec: #d9e2ec; --ink-d9e2ee: #d9e2ee; --ink-ddd: #ddd; --ink-dfe3e7: #dfe3e7; --ink-dfe6eb: #dfe6eb; --ink-dfe7f2: #dfe7f2; --ink-dfeef7: #dfeef7; --ink-e0e0e0: #e0e0e0; --ink-e0e4ef: #e0e4ef; --ink-e2e8f0: #e2e8f0; --ink-e5e7eb: #e5e7eb; --ink-e5edf6: #e5edf6; --ink-e6e6e6: #e6e6e6; --ink-e6edf3: #e6edf3; --ink-e8e8ea: #e8e8ea; --ink-e8edf2: #e8edf2; --ink-e8eef6: #e8eef6; --ink-e9eef2: #e9eef2; --ink-e9eef5: #e9eef5; --ink-e9f0f7: #e9f0f7; --ink-eaeaea: #eaeaea; --ink-eaeaf4: #eaeaf4; --ink-eaf1f8: #eaf1f8; --ink-eaf4fb: #eaf4fb; --ink-eee: #eee; --ink-eef2f7: #eef2f7; --ink-eef2ff: #eef2ff; --ink-f0f0f0: #f0f0f0; --ink-faf5ff: #faf5ff; --ink-fef2f2: #fef2f2; /* Dark literals that were hiding inside module token declarations (e.g. `--team-bg: #0b0b0b`), invisible to a background-property scan. */ --ink-f2f4f6: #f2f4f6; /* Library tiles (playbook manager). Dark floats icons on the dark library surface; light needs real cards or the grid reads as a slab. */ /* Player cards: dark keeps its exact 3%% wash; light gets a real card. Separate from --tile-* because the dark values differ. */ --pcard-bg: rgba(255,255,255,.03); --pcard-bd: rgba(255,255,255,.07); --pcard-shadow: none; --tile-bg: transparent; --tile-bd: transparent; --tile-shadow: none; --tile-hover: rgba(255,255,255,.06); /* ── Rail ink ─────────────────────────────────────────────────────────── Rail icon colour. Its own token because "ink at 70%" reads as grey-black in a light theme, which is heavier than the rail wants. */ /* Remaining dashboard surfaces + the cutup/playlist chip families. Chip TEXT is a pale pastel on dark and must go dark in light, or the label vanishes into the chip. */ --surface-abyss: #050810; --surface-modal: #11161f; --surface-hdr-2: #121827; --text-bright-2: #cbd5e1; --team-light-rgb: 96,165,250; --cutup: #fb923c; --cutup-rgb: 234,88,12; --playlist: #5eead4; --playlist-rgb: 20,184,166; /* Card elevation. Dark ships flat — depth comes from the surface step. Light needs a real lift or white cards dissolve into a white canvas. */ --elev-card: none; /* Selected rail button — flat ALL24 Carolina with a white icon. The old value was a team-colour gradient, which was never brand blue. */ --rail-active-bg: #4B9CD3; --rail-active-ink: #fff; /* Tooltip flyout. Solid: a translucent wash let page content read through. */ --rail-tip-bg: #1f2024; --rail-tip-ink: #fff; /* ── Brand plate (rail logo backing) ──────────────────────────────────── Dark theme needs no plate — the rail is already dark, so it is transparent here and becomes a black block in light themes. */ --brand-plate: transparent; --brand-plate-rule: transparent; --brand-plate-hover: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); /* ── Dark-locked surfaces ─────────────────────────────────────────────── Film playback, telestration and the play-diagram canvas. A theme may leave these alone to keep video and field diagrams on dark, which is the Premiere/Figma convention and better for contrast. */ --film-canvas: #000; --film-chrome: #0b0b0b; --film-text: #fff; --film-border: rgba(255,255,255,.12); /* ── PWA / browser chrome ───────────────────────────────────────────────── */ --meta-theme-color: #0a0b0d; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT — "Chalk". White canvas, near-black ink, tight borders. Canvas is a gradient seamed to the rail so the two read as one surface and the page gains depth toward the bottom. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --ink-rgb: 10,10,10; /* --shadow-rgb deliberately NOT overridden — shadows stay black. */ --accent-rgb: 75,156,211; --accent-glow-rgb: 21,97,143; --team-rgb: 29,78,216; --ok-rgb: 21,128,61; --warn-rgb: 161,98,7; --danger-rgb: 220,38,38; --danger-legacy-rgb: 220,38,38; /* Never runs to white. A full-height page stretches this gradient, so if the bottom stop were #fff the canvas would spend most of its run the same colour as the cards and the whole page would flatten out. Holding the range grey keeps white cards reading as cards at any page height. */ --canvas: radial-gradient(ellipse 92% 48% at 50% 0%, rgba(75,156,211,.16) 0%, transparent 60%), linear-gradient(180deg, #e4e8ee 0%, #e9ecf2 45%, #edf0f5 100%); --canvas-plain: #e9ecf2; --surface: #ffffff; --surface-2: #e4e8ee; --surface-3: #f3f5f8; --surface-alt: #ffffff; --panel: linear-gradient(180deg, #f2f4f7 0%, #fbfbfc 100%); --panel-solid: #eef0f4; --panel-alt: rgba(248,249,251,.97); --surface-raised: #e8eaef; --surface-sunk: #eceef2; --surface-deep: #dfe3e9; --surface-hdr: #ffffff; /* Border ladder — same rungs, heavier alpha (see the dark block). */ --bd-03: rgba(10,10,10,.07); --bd-04: rgba(10,10,10,.09); --bd-05: rgba(10,10,10,.10); --bd-06: rgba(10,10,10,.11); --bd-07: rgba(10,10,10,.12); --bd-08: rgba(10,10,10,.13); --bd-09: rgba(10,10,10,.14); --bd-10: rgba(10,10,10,.15); --bd-12: rgba(10,10,10,.17); --bd-14: rgba(10,10,10,.19); --bd-15: rgba(10,10,10,.20); --bd-16: rgba(10,10,10,.21); --bd-18: rgba(10,10,10,.22); --bd-20: rgba(10,10,10,.24); --bd-25: rgba(10,10,10,.28); --bd-26: rgba(10,10,10,.29); --bd-28: rgba(10,10,10,.31); --bd-30: rgba(10,10,10,.32); --bd-40: rgba(10,10,10,.38); --bd-50: rgba(10,10,10,.46); --bd-70: rgba(10,10,10,.60); --border: rgba(10,10,10,.11); --border-strong: rgba(10,10,10,.19); --border-rail: rgba(10,10,10,.14); --text-primary: #0a0a0a; --text-secondary: #3f3f46; --text-muted: #71717a; --text-dim: #a1a1aa; --text-plain: #0a0a0a; --text-soft: #71717a; --text-on-accent: #04141f; --text-bright: #0a0a0a; --text-chip: #3f3f46; --text-faint: #71717a; /* --accent stays brand Carolina as a FILL (white text on it would only reach 2.4:1, so fills carry --text-on-accent instead). --accent-ink darkens to 6.4:1 on white for text and icons. */ --accent: #4B9CD3; --accent-ink: #15618F; --accent-glow: #15618F; --team: #1d4ed8; --team-2: #1e40af; --team-light: #1d4ed8; --team-bright: #1e40af; --team-bright-rgb: 30,64,175; --ok: #15803d; --warn: #a16207; --danger: #dc2626; --info: #15618F; --ok-legacy: #15803d; --danger-legacy: #dc2626; --surface-well: #e8ebf0; --ok-soft: #166534; --danger-soft: #b91c1c; --warn-soft: #92400e; --team-soft: #1e40af; --hover: linear-gradient(135deg, rgba(10,10,10,.08), rgba(10,10,10,.04)); --hover-border: rgba(10,10,10,.16); --hover-flat: rgba(10,10,10,.05); --shadow-1: 0 1px 2px rgba(10,10,10,.09); --shadow-2: 0 1px 2px rgba(10,10,10,.09), 0 5px 16px rgba(10,10,10,.07); --shadow-3: 0 2px 4px rgba(10,10,10,.10), 0 10px 28px rgba(10,10,10,.10); /* The rail logo (all24-flat.png) is white-and-blue with a dark outline and washes out on a light rail, so light themes back it with a black plate. Flat, no drop shadow — the Carolina rule must stay crisp. */ --surface-abyss: #dfe3ea; --surface-modal: #eef1f6; --surface-hdr-2: #ffffff; --text-bright-2: #3f3f46; --team-light-rgb: 29,78,216; --cutup: #9a3412; --cutup-rgb: 194,65,12; --playlist: #0f766e; --playlist-rgb: 13,148,136; --elev-card: 0 1px 2px rgba(10,10,10,.07), 0 4px 12px rgba(10,10,10,.06); /* Huddle / film chrome — light. A five-step tonal ramp, NOT four shades of white. Dark separates surfaces by getting lighter as they raise (#070a10 -> #2c2c34, a big perceptual jump). Light has nowhere to go above #fff, so the BASE must sit genuinely mid-grey and raise toward white: rail #d3dae5 < side #dce3ec < shell #eaeef4 < surface #f4f6fa < float #fff The panels also carry a real gradient — a flat pale slab reads as a snowstorm however carefully the greys are picked. */ --hud-bg: #eaeef4; --hud-bg-side: #dce3ec; --hud-side-grad: linear-gradient(180deg, #dce3ec 0%, #e6ebf2 100%); --hud-rail: #d3dae5; --hud-rail-grad: linear-gradient(180deg, #d7dee8 0%, #cfd7e3 100%); --hud-bg-hover: rgba(10,10,10,.06); --hud-bg-active: rgba(10,10,10,.10); --hud-border: rgba(10,10,10,.15); --hud-text: #17202b; --hud-text-dim: #4a5563; --hud-text-bright: #0a0a0a; --hud-accent: var(--team-color, #1d4ed8); --hud-green: #15803d; --hud-compose-bg: #ffffff; --hud-compose-bd: rgba(10,10,10,.18); --hud-compose-focus: var(--team-color, #1d4ed8); --hud-msg-hover: rgba(10,10,10,.04); --hud-pill-bg: rgba(10,10,10,.07); --hud-danger: #dc2626; --hud-bg-float: #ffffff; --hud-surface: #f4f6fa; --hud-surface-raised: #ffffff; --hud-text-muted: #5b6470; --hud-text-secondary: #3d4650; /* "Turned on" is ALL24 Carolina with a white glyph, matching the main rail. */ --hud-active-bg: #4B9CD3; --hud-active-ink: #fff; /* Film tree levels + grid — light. Same structural idea, inverted: each level steps DARKER as it nests, the bins well is a recess rather than a hole, and every bin ink is a saturated dark hue so it reads on its own pale tint. */ --film-season-bg: rgba(29,78,216,.13); --film-season-bg-hover: rgba(29,78,216,.20); --film-season-bd: #1d4ed8; --film-season-ink: #17439b; --film-game-bg: rgba(10,10,10,.05); --film-game-btn-bg: rgba(255,255,255,.55); --film-game-btn-hover: rgba(10,10,10,.07); --film-bins-bg: #e2e8f1; --film-th-bg: #d5dce7; --film-row-alt: rgba(10,10,10,.035); --film-row-hover: rgba(10,10,10,.07); --film-row-active: rgba(75,156,211,.30); --bin-game-ink: #15803d; --bin-game-bg: rgba(34,197,94,.20); --bin-practice-ink: #854d0e; --bin-practice-bg: rgba(234,179,8,.26); --bin-scout-ink: #9a3412; --bin-scout-bg: rgba(249,115,22,.20); --bin-custom-ink: #5b21b6; --bin-custom-bg: rgba(139,92,246,.20); --bin-other-ink: #334155; --bin-other-bg: rgba(100,116,139,.20); /* Folder tree — light. Each level steps darker as it nests, and the group band carries the brand hue so the panel has an anchor of colour. */ --fold-band-bg: #4B9CD3; --fold-band-bd: #0a0a0b; --fold-band-ink: #ffffff; --fold-band-chevron: #ffffff; --fold-band-label: #ffffff; --fold-band-count-bg: rgba(255,255,255,.26); --fold-band-count-ink: #ffffff; --fold-row-bg: rgba(255,255,255,.72); --fold-row-bd: rgba(16,24,40,.22); --fold-row-ink: #263243; --fold-well: #e2e8f1; --fold-icon: #2C7FB8; --pl-item-bg: #ffffff; --pl-item-gap: 3px; --pl-item-bd: rgba(16,24,40,.30); --mc-ink: #12557d; --fold-leaf-bd: rgba(16,24,40,.30); --count-bg: rgba(16,24,40,.08); --count-ink: #4a5563; --rail-surface: linear-gradient(180deg,#1b222c 0%,#151a21 100%); /* The 4px Carolina rule under the brand plate already divides the rail; a second separator directly beneath it is noise. */ --rail-sep: transparent; /* Calm panel — light. */ --tree-guide: rgba(16,24,40,.15); --tree-sec-bg: #4B9CD3; --tree-sec-bg-hover: #3d8bc2; --tree-sec-ink: #ffffff; --tree-sec-bd: #0a0a0b; --tree-sec-count-bg: rgba(0,0,0,.24); --tree-sub-ink: #93a0b0; --tree-leaf-ink: #33415a; --tree-leaf-hover: #ffffff; --tree-count: #7b8798; --tree-thumb-bg: #4B9CD3; --tree-thumb-bd: #3a86c0; --tree-thumb-ink: #ffffff; --tree-game-ink: #2b6f9e; --seg-bg: #ffffff; --seg-bd: rgba(16,24,40,.18); --seg-ink: #4a5563; --seg-hover: rgba(16,24,40,.06); --seg-active-bg: #4B9CD3; --seg-active-ink: #ffffff; /* Sunken ladder — far lower alpha; black bites much harder on light. */ --sunk-05: rgba(0,0,0,.02); --sunk-10: rgba(0,0,0,.03); --sunk-12: rgba(0,0,0,.035); --sunk-15: rgba(0,0,0,.04); --sunk-20: rgba(0,0,0,.05); --sunk-25: rgba(0,0,0,.06); --sunk-30: rgba(0,0,0,.07); --sunk-35: rgba(0,0,0,.08); --sunk-40: rgba(0,0,0,.09); --sunk-50: rgba(0,0,0,.11); --sunk-55: rgba(0,0,0,.12); --sunk-60: rgba(0,0,0,.13); --sunk-62: rgba(0,0,0,.135); --sunk-65: rgba(0,0,0,.14); --sunk-70: rgba(0,0,0,.15); --sunk-72: rgba(0,0,0,.155); --sunk-80: rgba(0,0,0,.17); /* Playbook module — light. */ --pb-canvas: #e9ecf2; --pb-library: #eef1f6; --pb-card: #ffffff; --pb-surface: #f5f7fa; --pb-surface-2: #eaeef4; --pb-raised: #ffffff; --pb-raised-2: #f2f5f9; --pb-raised-3: #e9edf3; --pb-chrome: #e4e8ee; --pb-ink: #16202e; --pb-ink-dim: #5b6879; /* ── Paper ────────────────────────────────────────────────────────── A white sheet — play cards, diagrams, documents, print previews. Paper does NOT flip: it is white in every theme, exactly as the film player is black in every theme. Use these for surfaces that were hardcoded #fff; do NOT use --text-* for a background, those invert and will turn the surface black in light. */ --paper: #ffffff; --paper-2: #f1f5f9; --paper-3: #f0f1f3; --paper-ink: #0a0a0a; --pb-amber: #8a5a00; --pb-green: #15803d; --pb-green2: #0f7a35; /* Module palettes — light. */ --mod-abyss: #e4e8ee; --mod-abyss-2: #e7ebf1; --mod-deep: #e9ecf2; --mod-deep-2: #eaeef4; --mod-sunk: #edf0f5; --mod-sunk-2: #eef1f6; --mod-sunk-3: #f0f3f7; --mod-raised: #f5f7fa; --mod-raised-2: #ffffff; --mod-ink: #25303f; --mod-ink-2: #3b4657; --mod-ink-3: #16202e; /* Auto-derived surfaces — light. */ --auto-020617: #e4e9f0; --auto-04060a: #e4e9f0; --auto-04141d: #eef1f6; --auto-05070c: #e4e9f0; --auto-06131c: #eef1f6; --auto-080a0f: #e4e9f0; --auto-080b12: #e4e9f0; --auto-080c13: #e4e9f0; --auto-0a0b0d: #e4e9f0; --auto-0a0b0e: #e4e9f0; --auto-0a0e14: #e4e9f0; --auto-0a0e15: #e4e9f0; --auto-0a0f17: #e4e9f0; --auto-0a1220: #eef1f6; --auto-0b0b0b: #e4e9f0; --auto-0b0d10: #e4e9f0; --auto-0b0e13: #e4e9f0; --auto-0b0f14: #e4e9f0; --auto-0b0f16: #e4e9f0; --auto-0b1017: #eef1f6; --auto-0b1119: #eef1f6; --auto-0c0e12: #e4e9f0; --auto-0c1118: #eef1f6; --auto-0c1119: #eef1f6; --auto-0c111a: #eef1f6; --auto-0d0d0d: #e4e9f0; --auto-0d0f14: #e4e9f0; --auto-0d1014: #eef1f6; --auto-0d1017: #eef1f6; --auto-0d1117: #eef1f6; --auto-0d1118: #eef1f6; --auto-0d1218: #eef1f6; --auto-0d121b: #eef1f6; --auto-0d1319: #eef1f6; --auto-0e0e10: #e4e9f0; --auto-0e0f12: #e4e9f0; --auto-0e0f13: #e4e9f0; --auto-0e141f: #eef1f6; --auto-0e1b28: #eef1f6; --auto-0f0f10: #e4e9f0; --auto-0f1114: #eef1f6; --auto-0f1115: #eef1f6; --auto-0f1117: #eef1f6; --auto-0f1218: #eef1f6; --auto-0f1219: #eef1f6; --auto-0f141b: #eef1f6; --auto-0f1520: #eef1f6; --auto-0f1722: #eef1f6; --auto-101010: #eef1f6; --auto-10141c: #eef1f6; --auto-10161f: #eef1f6; --auto-10182a: #eef1f6; --auto-111216: #eef1f6; --auto-111317: #eef1f6; --auto-111318: #eef1f6; --auto-111418: #eef1f6; --auto-11151d: #eef1f6; --auto-121212: #eef1f6; --auto-12122a: #eef1f6; --auto-12161f: #eef1f6; --auto-121722: #eef1f6; --auto-121822: #eef1f6; --auto-121823: #eef1f6; --auto-121b28: #eef1f6; --auto-131313: #eef1f6; --auto-13161c: #eef1f6; --auto-13161e: #eef1f6; --auto-131923: #eef1f6; --auto-141414: #eef1f6; --auto-14171c: #eef1f6; --auto-141720: #eef1f6; --auto-14181d: #eef1f6; --auto-141a22: #eef1f6; --auto-141b23: #eef1f6; --auto-141b25: #eef1f6; --auto-151515: #eef1f6; --auto-151528: #eef1f6; --auto-15181c: #eef1f6; --auto-15191c: #eef1f6; --auto-161616: #eef1f6; --auto-16161a: #eef1f6; --auto-16191f: #eef1f6; --auto-161922: #eef1f6; --auto-161b22: #eef1f6; --auto-161b24: #eef1f6; --auto-161c27: #eef1f6; --auto-161d2a: #eef1f6; --auto-181818: #eef1f6; --auto-181a1e: #eef1f6; --auto-181b22: #eef1f6; --auto-182029: #eef1f6; --auto-19171d: #eef1f6; --auto-191919: #eef1f6; --auto-1a1411: #eef1f6; --auto-1a1a1a: #eef1f6; --auto-1a1a2e: #eef1f6; --auto-1a1c22: #eef1f6; --auto-1a1d21: #eef1f6; --auto-1a1d24: #eef1f6; --auto-1a1e26: #eef1f6; --auto-1a1f2b: #eef1f6; --auto-1a1f2e: #eef1f6; --auto-1a2433: #f7f9fb; --auto-1a3228: #f7f9fb; --auto-1b1b1b: #eef1f6; --auto-1b1e24: #eef1f6; --auto-1c1c1c: #eef1f6; --auto-1d1d1d: #eef1f6; --auto-1d1f24: #eef1f6; --auto-1d2230: #f7f9fb; --auto-1d2532: #f7f9fb; --auto-1e1e1e: #eef1f6; --auto-1e1e22: #eef1f6; --auto-1e1e24: #eef1f6; --auto-1e1e34: #eef1f6; --auto-1e2024: #eef1f6; --auto-1e2028: #eef1f6; --auto-1e2128: #eef1f6; --auto-1e2130: #eef1f6; --auto-1e2228: #eef1f6; --auto-1e2230: #f7f9fb; --auto-1e2233: #f7f9fb; --auto-1e2433: #f7f9fb; --auto-1e2a31: #f7f9fb; --auto-1f1f1f: #eef1f6; --auto-1f2937: #f7f9fb; --auto-222228: #f7f9fb; --auto-22242a: #f7f9fb; --auto-222529: #f7f9fb; --auto-23272c: #f7f9fb; --auto-252525: #f7f9fb; --auto-252937: #f7f9fb; --auto-262626: #f7f9fb; --auto-262830: #f7f9fb; --auto-2a1515: #eef1f6; --auto-2a2d31: #f7f9fb; --auto-2a3942: #ffffff; --auto-2c2c2c: #f7f9fb; --auto-2c2c34: #f7f9fb; --auto-2c2d30: #f7f9fb; --auto-2d3a2d: #ffffff; --auto-2e3238: #f7f9fb; --auto-2e3345: #f7f9fb; --auto-333: #ffffff; --auto-334: #fefeff; --auto-363c50: #ffffff; --auto-383d52: #ffffff; --auto-06080c: #e4e9f0; --auto-070a0f: #e4e9f0; --auto-0d1219: #eef1f6; --auto-0e1116: #eef1f6; --auto-11161d: #eef1f6; --auto-171d24: #eef1f6; --auto-222a36: #f7f9fb; /* Auto-derived ink — light. */ --ink-999: #585858; --ink-9a9a9a: #575757; --ink-9a9b9d: #565657; --ink-9aa6b2: #4f5050; --ink-9aa7b1: #4f4f50; --ink-9aa7b2: #4f4f50; --ink-9aa7b4: #4e4f50; --ink-9fb0c0: #48494a; --ink-aaa: #4c4c4c; --ink-aab: #4a4a4b; --ink-aab4bf: #454646; --ink-aeb9c2: #424243; --ink-b3bdc8: #3f3f40; --ink-b9c0c7: #3d3d3d; --ink-bbb: #404040; --ink-c0c4ca: #393a3a; --ink-c7d2df: #303031; --ink-c8cad0: #353535; --ink-c8d8e6: #2c2d2e; --ink-ccc: #343434; --ink-cdd3e0: #2e2f2f; --ink-cfd6db: #2d2e2e; --ink-cfd8e3: #2c2c2c; --ink-d0d0d0: #313131; --ink-d0d0e0: #2f2f30; --ink-d0d0e4: #2f2f30; --ink-d4d9de: #2b2b2b; --ink-d6dee4: #282828; --ink-d9e2ec: #252526; --ink-d9e2ee: #242525; --ink-ddd: #282828; --ink-dfe3e7: #242424; --ink-dfe6eb: #222223; --ink-dfe7f2: #212122; --ink-dfeef7: #1d1e1e; --ink-e0e0e0: #262626; --ink-e0e4ef: #222323; --ink-e2e8f0: #202021; --ink-e5e7eb: #212121; --ink-e5edf6: #1d1d1e; --ink-e6e6e6: #222222; --ink-e6edf3: #1d1d1e; --ink-e8e8ea: #202020; --ink-e8edf2: #1d1d1d; --ink-e8eef6: #1c1c1d; --ink-e9eef2: #1c1d1d; --ink-e9eef5: #1c1c1c; --ink-e9f0f7: #1b1b1b; --ink-eaeaea: #1f1f1f; --ink-eaeaf4: #1e1e1e; --ink-eaf1f8: #1a1a1b; --ink-eaf4fb: #191919; --ink-eee: #1c1c1c; --ink-eef2f7: #19191a; --ink-eef2ff: #181819; --ink-f0f0f0: #1b1b1b; --ink-faf5ff: #151515; --ink-fef2f2: #171616; --ink-f2f4f6: #181818; --pcard-bg: #ffffff; --pcard-bd: rgba(16,24,40,.16); --pcard-shadow: 0 1px 2px rgba(10,10,10,.06), 0 3px 10px rgba(10,10,10,.05); --tile-bg: #ffffff; --tile-bd: rgba(16,24,40,.16); --tile-shadow: 0 1px 2px rgba(10,10,10,.06), 0 3px 10px rgba(10,10,10,.05); --tile-hover: #f7f9fb; --rail-ink: #123a5c; /* navy, not near-black */ --rail-ink-strong: #0b2540; --rail-active-bg: #4B9CD3; --rail-active-ink: #fff; /* Dark chip on a light rail — the legible convention for tooltips. */ --rail-tip-bg: #14202b; --rail-tip-ink: #fff; --brand-plate: #0a0a0b; --brand-plate-rule: #4B9CD3; --brand-plate-hover: #16161a; /* Film and the play-diagram canvas stay dark. Deliberate: video and field diagrams lose contrast against a light surround. Remove these four lines to make a theme flip them too. */ --film-canvas: #000; --film-chrome: #0b0b0b; --film-text: #fff; --film-border: rgba(255,255,255,.12); --meta-theme-color: #e4e7ec; } /* ═══════════════════════════════════════════════════════════════════════════ NOTE — two accent blues The app carries both #4B9CD3 (brand, login, marketing) and #49b2e3 (app.css --accent, the sidebar active rail bar). They are 2 points apart in green and indistinguishable in use. Both are preserved above so dark stays byte-identical; collapsing --accent-glow into --accent is a one-line change once someone confirms nothing depends on the difference. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ DARK ISLANDS — regions that stay dark in every theme. Video and field diagrams lose contrast against a light surround, so the video viewport, its transport controls and the telestration canvas keep the dark palette regardless of theme. This is the Premiere / YouTube-theater / Figma convention. MECHANISM: rather than rewriting hundreds of rules to special "film" tokens, an island simply RE-DECLARES the dark values on its root. Everything inside inherits them, so ordinary tokenised CSS renders dark with no per-rule surgery — and adding a new island is one selector, not a refactor. The declarations below are generated from the dark block above, so the two can never drift apart. To make a region a dark island, add its root selector to the list. Add ONLY roots that wrap video or a drawing canvas. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme] :is( /* Approved design: the rail stays DARK in light themes, framing the light workspace instead of being a fourth pale surface beside it. --brand-plate* is deliberately NOT reset by the island, so the black plate and its Carolina rule survive here and stay transparent in dark. */ .app-rail, /* The video stage. Contains #filmVideo, the poster, .film-controls and its scrubber/trim/snap children, the settings panel, and — verified in film-telestration.js:75 and :1307 — the telestration canvas and toolbar, both of which append to #filmPlayerWrap. */ .film-player-wrap, /* Body-mounted popovers that escape .film-player-wrap's subtree. film-player.js:1429 does document.body.appendChild(menu), so DOM containment cannot reach these and they need their own root. */ .film-speed-menu, .film-tele-share-modal, /* Full-bleed overlays that carry their own