/* ═══════════════════════════════════════════════════════════════════════ * tw-metro-scheme.css - the TriviaWorks colour system * * DESIGNED 2026-08-22. Andrew: "Metro is the right design language for what * we're building - but I think I prefer the colour scheme from the previous * presenters", then "choose a unified colour scheme that can work for * Presenter mode", then "use best practice, study comparable products". * * ── WHAT THIS IS ──────────────────────────────────────────────────────── * Five hues, twelve steps each, built in CIE LCh so the steps are * perceptually even rather than evenly spaced in hex. Step roles follow * Radix Colors, which is the mature reference for this shape: * * 1–2 backgrounds 7–8 borders * 3–5 component backgrounds 9–10 solid * 6 subtle border 11–12 text * * The neutral is NAVY, not grey: hue 292, carried from the presenters' own * --bg-primary #1a1e3a. Greys with no hue at all read as unchosen, and a * neutral that shares the accent's world is the whole difference between * "designed" and "default". * * ── THREE DECISIONS THAT LOOK WRONG UNTIL YOU MEASURE ─────────────────── * * ★ LIGHTNESS VARIES BY HUE, DELIBERATELY. Holding it constant across hues * is the naive reading of a perceptual palette, and it turns red into * salmon: at a lightness bright enough to carry brass, red stops being * red. Radix varies it per hue for the same reason. Do not "regularise" * these scales onto one lightness plane. * * ★ BRASS AND GREEN TAKE BLACK FOREGROUND; RED TAKES WHITE. Measured, not * chosen: white on --tw-green-9 is 2.98:1 and FAILS; black on it is * 5.86:1 and passes. Radix marks amber, lime and mint the same way. The * --*-on tokens below carry the correct foreground for each solid - use * them rather than assuming white. * * ★ CHROMA IS HELD DOWN ON PURPOSE. The legacy presenter badges sit at * chroma 70–88. Saturated colour on a dark ground optically vibrates and * strains the eye across a three-hour night, and the dark-theme guidance * is to desaturate. These solids sit near 50–58. * * ── ELEVATION ─────────────────────────────────────────────────────────── * There are no shadows and no gradients here, and that is not Metro being * austere. Dark-theme elevation is done with LIGHTNESS - higher elevation, * lighter surface. Metro's flat language and the dark-theme guidance agree * on this, so use the navy ramp for depth and do not reach for a shadow. * * ── THE DARK END WAS TOO COMPRESSED, AND ONLY LOOKING SHOWED IT ───────── * Andrew, 2026-08-22: "Conduct a full visual pass over your own work. Do not * make assumptions from numbers." * * ★ The first ramp stepped L* 9,12,16,19,23 - EVENLY SPACED, which is why it * passed every check I ran. Rendered side by side it was one colour: steps * 1 to 5 were indistinguishable, and those are the five most-used rungs in * the system (app background, subtle background, component, hover, active). * Elevation here is done with lightness instead of shadow, so a compressed * dark end means there is NO elevation - the mechanism was nominally * present and doing nothing. * Widened to 9,14,19,25,31,38,46,55. Contrast re-checked: navy-12 stays AAA * on every surface through step 5, navy-11 holds AA at 4.98:1 on step 5. * * ── TWO CORRECTIONS AFTER REVIEW (2026-08-22) ─────────────────────────── * Referred to Fable for a second opinion; both of these were real defects. * * ⚠ navy-8 and navy-9 WERE THE SAME COLOUR - #686883 against #676886, a * difference of 0.03 in L*. Step 8 is the focus ring and step 9 is the * solid, so a focused solid had an invisible ring. Regenerated to L*45 / * L*53. If you ever regenerate this scale, check adjacent steps differ by * at least ~5 L*; the generator will happily emit two identical rungs. * * ⚠ red-10 WAS #D55353, and white on IT is 4.05:1 - so red-9 was fixed and its * HOVER was left failing. Every other hue steps LIGHTER from 9 to 10, and on * red that is exactly the wrong direction: red-9 already sits at the darkest * point where white still clears AA, so any lighter hover falls through it. * Red now steps DARKER on hover, to #B93B44 (white 5.57:1). It is the only * hue in the scheme that does, and that asymmetry is the measurement, not an * oversight. Found by rendering the scheme's own swatch page - which had been * unopenable for its whole life because of an embedded font. * * ⚠ red-9 WAS #DC5958, and white on it is 3.74:1 - which passes AA only for * LARGE text. The Wrong button is a two-word label at 15px, so the single * most consequential control in the product shipped below AA. Darkened to * L*48, where white measures 4.81:1 and passes at any size. It stays * WHITE-on-red deliberately: dark-on-red beside dark-on-green would kill * the instant polarity read a host depends on in a dark room. * * ── MEASURED CONTRAST (against --tw-navy-1) ───────────────────────────── * navy-12 text 15.43:1 AAA brass-11 text 9.72:1 AAA * (the "black" figures below are navy-1, which is what --*-on resolves * to; true #000 measures higher still, so these are the conservative * numbers and the label was the only thing wrong) * navy-11 text 9.67:1 AAA green-11 text 9.71:1 AAA * navy-10 3.88:1 AA-lg red-11 text 9.67:1 AAA * black on brass-9 8.60:1 AAA black on green-9 5.86:1 AA * white on red-9 4.81:1 AA * * ★ LIGHT THEME IS NOW DEFINED, AT THE BOTTOM OF THIS FILE. It is opt-in: * dark stays the bare-:root default because the presenters and the host * controllers are dark and the venue is dark. A surface that wants light * sets data-theme="light" on its root, which is what the DESKTOP editing * surfaces do -- Andrew, 2026-08-22: "This is also a desktop modal, so light * mode (the previous colour scheme) is the default." * * It is here, in this file, as a second block rather than a fork, because * six mechanic mockups had already improvised their own light palette out of * pure #FFFFFF and #0A0A0A while this file said light was out of scope. Six * surfaces independently inventing the same missing theme is how a design * system fractures, and the fracture was visible the moment the pages were * opened side by side. * ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── NAVY · the neutral ─────────────────────────────────────────────── */ --tw-navy-1:#181923; /* app background */ --tw-navy-2:#222230; /* subtle background */ --tw-navy-3:#2C2D40; /* component background */ --tw-navy-4:#393950; /* component hover */ --tw-navy-5:#464761; /* component active */ --tw-navy-6:#565774; /* subtle border */ --tw-navy-7:#6A6A89; /* border */ --tw-navy-8:#81819D; /* strong border, focus ring */ --tw-navy-9:#9494AE; /* solid */ --tw-navy-10:#A1A1B8; /* solid hover */ --tw-navy-11:#C0BFD2; /* low-contrast text */ --tw-navy-12:#F0F0FA; /* high-contrast text */ /* ── BRASS · the accent. Marks what is always true, never a verdict. ── */ --tw-brass-1:#211809; --tw-brass-2:#291E0A; --tw-brass-3:#342509; --tw-brass-4:#3D2B09; --tw-brass-5:#48330B; --tw-brass-6:#563E0E; --tw-brass-7:#6A4D17; --tw-brass-8:#86652A; --tw-brass-9:#E3AD49; --tw-brass-10:#F3BA56; --tw-brass-11:#E8BA6E; --tw-brass-12:#FFEED9; --tw-brass-on:var(--tw-navy-1); /* ★ BLACK on the solid, not white */ /* ── GREEN · correct. Only ever at a reveal. ────────────────────────── */ --tw-green-1:#101C12; --tw-green-2:#112415; --tw-green-3:#102E18; --tw-green-4:#10351B; --tw-green-5:#123F20; --tw-green-6:#164C27; --tw-green-7:#205E32; --tw-green-8:#367748; --tw-green-9:#47A863; --tw-green-10:#56B66F; --tw-green-11:#86D296; --tw-green-12:#D9F9DE; --tw-green-on:var(--tw-navy-1); /* ★ BLACK: white measures 2.98:1 */ /* ── RED · wrong. ───────────────────────────────────────────────────── */ --tw-red-1:#271513; --tw-red-2:#321917; --tw-red-3:#421D1B; --tw-red-4:#4E201F; --tw-red-5:#5C2624; --tw-red-6:#6E2E2C; --tw-red-7:#863B39; --tw-red-8:#A4524F; --tw-red-9:#C64647; --tw-red-10:#B93B44; /* ★ HOVER GOES DARKER, see below */ --tw-red-11:#FFABA5; --tw-red-12:#FFEDEB; --tw-red-on:#FFFFFF; /* white, 4.81:1 - passes AA at ANY size */ /* ── TEAL · information. Never a verdict, so it is never confusable * with green at a glance across a dark room. ───────────────────────── */ --tw-teal-1:#031D20; --tw-teal-2:#002428; --tw-teal-3:#012D32; --tw-teal-4:#01343A; --tw-teal-5:#033D44; --tw-teal-6:#024A51; --tw-teal-7:#045B65; --tw-teal-8:#057682; --tw-teal-9:#00A0AF; --tw-teal-10:#07AEBF; --tw-teal-11:#3FD3E5; --tw-teal-12:#CDF8FF; --tw-teal-on:var(--tw-navy-1); /* ── SEMANTIC ALIASES ─────────────────────────────────────────────────── * Surfaces should reach for these, not for a numbered step, so a later * change to the scheme lands everywhere at once. * * ⚠ PREFIX IS --tws-, NOT --tw-, AND THAT IS DELIBERATE. `--tw-text` and * `--tw-border` are ALREADY defined by tw-editor-v4-theme.css and consumed * by tw-tokens.css. Naming these --tw-text/--tw-border would have made * load order decide which theme an editor surface got, and this file would * have silently repainted the editor the first time both were loaded. * Checked 2026-08-22: the numbered scales below collide with nothing; * only the short semantic names did. */ --tws-bg:var(--tw-navy-1); --tws-bg-subtle:var(--tw-navy-2); --tws-surface:var(--tw-navy-3); --tws-surface-hover:var(--tw-navy-4); --tws-border:var(--tw-navy-6); --tws-border-strong:var(--tw-navy-8); --tws-text:var(--tw-navy-12); --tws-text-quiet:var(--tw-navy-11); --tws-text-faint:var(--tw-navy-10); --tws-accent:var(--tw-brass-9); --tws-accent-hover:var(--tw-brass-10); --tws-accent-text:var(--tw-brass-11); --tws-accent-on:var(--tw-brass-on); --tws-correct:var(--tw-green-9); --tws-correct-on:var(--tw-green-on); --tws-wrong:var(--tw-red-9); --tws-wrong-on:var(--tw-red-on); --tws-info:var(--tw-teal-9); --tws-info-on:var(--tw-teal-on); /* ★ THE SCRIM (2026-08-23). Slide content, not chrome: it is painted on the * photograph to clear space for the stem, so it stays dark in both themes. * Same value as GK_SCRIM_COLOUR in tw-canonical-templates.js - the template * is still the authority on what a scrim IS; this is the identical value so * the Bank's live preview and the rendered slide cannot disagree. */ --tw-scrim: #060A0E; /* ★ THE TWO STEM COLOURS (2026-08-23). Slide content, like the scrim above, * not chrome - the stem is painted ON the picture, so these do not follow * the interface theme. The declared `stem_colour` hint is the rule: white * over a dark clearing, dark over a pale one. Named here rather than inline * so the colour ratchet stays honest and the Bank's invert control, the * template and the rendered slide cannot drift to three different whites. * ⚠ The dark value is #181923, the ink already used across the estate, not * pure #000000 - a true black on a photograph reads as a hole. */ --tw-stem-light: #FFFFFF; --tw-stem-dark: #181923; } /* ════════════════════════════════════════════════════════════════════════ * LIGHT THEME · opt-in, for the desktop editing surfaces * ADDED 2026-08-22 after the design review. * * Same construction as the dark scale above: five hues, twelve steps, built * in CIE LCh, Radix step roles. The neutral is the SAME navy hue 292 carried * down to a light ramp, so a user moving between a dark host controller and a * light editor is moving between two states of one product rather than two * products. Chroma runs 1.5 to 12 -- present enough that the greys are not * the pure #FFFFFF/#0A0A0A the six improvised pages used, low enough that a * page of forms does not tint. * * ★ ONLY THE NUMBERED STEPS ARE REDEFINED. The --tws-* semantic aliases * above resolve at use time, so they follow this block automatically. Do * not re-declare them here; a second copy is a second thing to forget. * * ★ THE POLARITY IS PRESERVED ACROSS THEMES. Brass and green take the dark * ink; red and teal take white. That is the same pairing as the dark scale, * deliberately: a host reading a reveal must get the same instant read in * either theme, and swapping which one is dark-on-light between themes is * exactly the kind of inconsistency the eye notices and cannot name. * * ⚠ TWO COLLISIONS WERE CAUGHT BEFORE THIS SHIPPED, and they are the same * defect as the navy-8/navy-9 collision in the dark scale. The generator * first emitted red-10 #B63941 and red-11 #B5333E -- 1.0 apart in L*, i.e. * the solid-hover and the text step were one colour. Teal was 3.0 apart. * Both were pushed down (red-11 L*37, teal-11 L*34). If you regenerate this * scale, CHECK ADJACENT STEPS; the generator will happily emit duplicates. * * MEASURED CONTRAST (against --tw-navy-1 #FCFCFF) * navy-12 text 13.25:1 AAA brass-11 text 5.86:1 AA * navy-11 text 5.83:1 AA green-11 text 6.35:1 AA * navy-10 4.79:1 AA red-11 text 7.08:1 AAA * navy-9 3.93:1 AA-lg teal-11 text 7.24:1 AAA * ink on brass-9 5.55:1 AA ink on green-9 4.65:1 AA * white on red-9 4.73:1 AA white on teal-9 4.78:1 AA * * Step 11 on step 3, which is how the status chips are built, measures * 5.11 brass / 5.44 green / 5.86 red / 6.20 teal. All pass AA. * * ⚠ red-9 AND green-9 WERE BOTH BELOW AA ON THE FIRST PASS -- white on red * at 4.18 and ink on green at 4.02 -- which is the third time this exact * failure has appeared in this file. A solid that looks strong enough * usually is not. Measure every one. * ════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* ── NAVY · the neutral, hue 292, same as dark ─────────────────── */ --tw-navy-1:#FCFCFF; /* app background */ --tw-navy-2:#F7F7FB; /* subtle background */ --tw-navy-3:#F0F0F6; /* component background */ --tw-navy-4:#EAEAF1; /* component hover */ --tw-navy-5:#E3E3EB; /* component active */ --tw-navy-6:#DCDBE5; /* subtle border */ --tw-navy-7:#D1D1DC; /* border */ --tw-navy-8:#BDBDCB; /* strong border, focus ring */ --tw-navy-9:#7D7D92; /* solid */ --tw-navy-10:#6F6F84; /* solid hover */ --tw-navy-11:#626274; /* low-contrast text */ --tw-navy-12:#2D2D3A; /* high-contrast text */ /* ── BRASS · the accent ──────────────────────────────── */ --tw-brass-1:#FFFAEF; --tw-brass-2:#FFF4E2; --tw-brass-3:#FFEAC8; --tw-brass-4:#FFE1B3; --tw-brass-5:#FCD69E; --tw-brass-6:#F2C888; --tw-brass-7:#E1B46B; --tw-brass-8:#D9A955; --tw-brass-9:#D19D39; --tw-brass-10:#C3902C; --tw-brass-11:#835C02; --tw-brass-12:#4B360D; --tw-brass-on:var(--tw-navy-12); /* ★ dark ink on the solid, as in dark */ /* ── GREEN · correct ───────────────────────────────── */ --tw-green-1:#F4FDF5; --tw-green-2:#E8FAEA; --tw-green-3:#D3F3D8; --tw-green-4:#C3EDC9; --tw-green-5:#B2E5BB; --tw-green-6:#9EDAA9; --tw-green-7:#82C890; --tw-green-8:#6BB97D; --tw-green-9:#55A86A; --tw-green-10:#46995D; --tw-green-11:#166C35; --tw-green-12:#0E381B; --tw-green-on:var(--tw-navy-12); /* ★ dark ink; white measures 2.92 and fails */ /* ── RED · wrong ──────────────────────────────────── */ --tw-red-1:#FFF7F6; --tw-red-2:#FFEEEC; --tw-red-3:#FFE0DE; --tw-red-4:#FFD3D0; --tw-red-5:#FFC5C2; --tw-red-6:#FFB4B1; --tw-red-7:#FF9D9A; --tw-red-8:#FB7879; --tw-red-9:#C9454D; --tw-red-10:#B63941; --tw-red-11:#A32734; --tw-red-12:#5C2123; --tw-red-on:#FFFFFF; /* ★ white, 4.73:1 */ /* ── TEAL · information, never a verdict ───────────────────── */ --tw-teal-1:#EFFDFF; --tw-teal-2:#E0FAFE; --tw-teal-3:#C4F3FB; --tw-teal-4:#ADEDF7; --tw-teal-5:#93E6F2; --tw-teal-6:#77DBE9; --tw-teal-7:#4FC9D9; --tw-teal-8:#00ACBE; --tw-teal-9:#007E91; --tw-teal-10:#007184; --tw-teal-11:#005E6F; --tw-teal-12:#003841; --tw-teal-on:#FFFFFF; /* ★ white, 4.78:1 */ }