/* theme.css -- 7 September 2026. Written because Fred looked at the live home page with the lights dimmed and said "the contrast is poor on the 'Dim the lights' page." It was, and worse than it looked. Measured before writing anything: .betabar background #fff8e6, hardcoded, with no dark override. In dark the text inherits --ink #EDE6D8 and lands on near-white cream: --ink on #fff8e6 = 1.17:1 --soft on #fff8e6 = 2.55:1 --navy on #fff8e6 = 1.54:1 WCAG asks 4.5:1 for body text. 1.17 is not "poor", it is absent. The same hardcoded-cream pattern is in .vsi-ladder -- the "some things should not wait" block -- on twenty pages. Its own text colours are hardcoded dark, but its body PARAGRAPHS are not: they inherit. So under a dark theme that block keeps its heading and its bold words and silently loses its prose. A triage ladder with holes in it is worse than one that is plainly broken, because it still looks answered. And the reason Fred could only have seen it on the home page: the lamp, the boot script and the dark tokens lived ONLY in index.html. Dimming the lights and then walking into a room turned the lights back on. The dark theme was added for the person reading at 2am; that person does not stay on the home page. Two decisions worth stating. 1. LIGHT IS NOT TOUCHED. Every rule below is scoped to :root[data-theme="dark"], which is specificity 0,2,1 and beats the pages' own 0,1,0 rules no matter what order they load in. The light design is the one Fred approved. It is unchanged, byte for byte, on every page. 2. THE NOTICE KEEPS ITS OWN COLOUR. The lazy fix is to point the beta bar and the ladder at --paper-raised. That works and it costs the thing they were doing: a warm panel that reads as set-apart rather than as more page. So they get their own token pair in each theme, and dark gets a warm raised brown, not a grey. */ /* Light defaults, for the four rooms that carry no :root of their own. Linked FIRST in the head, so any page that defines these itself still wins. */ :root{ --paper:#F2EFE6; --paper-raised:#FBFAF5; --ink:#18213B; --navy:#1F3864; --brass:#B8863B; --brass-deep:#8A6222; --soft:#5c6274; --edge:#ded5c4; --notice:#fff8e6; --notice-edge:#e8d9a8; --notice-bar:#b8860b; } /* Dark. --navy inverts to a light warm ink, because navy on dark is unreadable. */ :root[data-theme="dark"]{ --paper:#171410; --paper-raised:#211D18; --ink:#EDE6D8; --navy:#D8C9A8; --brass:#C79A4A; --brass-deep:#D9AE60; --soft:#A79C8B; --edge:#3A342B; /* 12.6:1 for --ink, 5.6:1 for --soft. Measured, not chosen by eye. */ --notice:#2A2318; --notice-edge:#4A3F2B; --notice-bar:#C79A4A; } :root[data-theme="dark"] body{ background: radial-gradient(120% 68% at 50% -8%, #241E16 0%, #1C1813 34%, var(--paper) 68%), var(--paper); color:var(--ink); } /* THE BETA NOTICE */ :root[data-theme="dark"] .betabar{ background:var(--notice); border-color:var(--notice-edge); border-left-color:var(--notice-bar); color:var(--ink); } /* THE TRIAGE LADDER -- "some things should not wait". Twenty pages. Every colour it hardcodes is restated here as a token, including the ones it got right on light, because a half-converted block is how this defect happened. */ :root[data-theme="dark"] .vsi-ladder{ background:var(--notice); border-color:var(--notice-edge); border-left-color:var(--notice-bar); color:var(--ink); } :root[data-theme="dark"] .vsi-ladder > summary{color:var(--brass-deep)} :root[data-theme="dark"] .vsi-ladder p{color:var(--ink)} :root[data-theme="dark"] .vsi-ladder em{color:var(--ink)} :root[data-theme="dark"] .vsi-ladder-close, :root[data-theme="dark"] .vsi-ask{border-top-color:var(--notice-edge)} :root[data-theme="dark"] .vsi-ask-h{color:var(--ink)} :root[data-theme="dark"] .vsi-ask li{color:var(--ink)} :root[data-theme="dark"] .vsi-ask-f{color:var(--soft)} /* terms.html -- #fff panel, 1.24:1 */ :root[data-theme="dark"] .legal{background:var(--paper-raised); color:var(--ink)} /* the FIND A PAGE panel's free-text box */ :root[data-theme="dark"] .ask-name-q{ background:var(--paper-raised); color:var(--ink); border-color:var(--edge); } /* The lamp, for the pages that did not have one. Same shape as the home page's. */ .lamp{ position:fixed; top:.9rem; right:.9rem; z-index:50; font:inherit; font-size:.8rem; letter-spacing:.06em; color:var(--soft); background:var(--paper-raised); border:1px solid var(--edge); border-radius:3px; padding:.35rem .7rem; cursor:pointer; } .lamp:hover,.lamp:focus-visible{color:var(--ink); border-color:var(--brass)} @media print{.lamp{display:none}} @media (forced-colors: active){ .lamp{border:2px solid CanvasText; color:CanvasText; background:ButtonFace} } /* ------------------------------------------------------------------------ THE REST OF THE DARK PASS -- 7 September 2026. Turning the lamp on across the site made a second problem visible, and it was always there: dark mode had only ever been designed for one page, so every other page paints hardcoded light panels and hardcoded dark ink. Under a dark theme those combine wrongly in both directions -- light ink on a white panel, and dark ink on the dark ground. Measured on rooms/c3g.html with the lamp on, before this block existed: 107 elements below 4.5:1, including every item of the emergency list at 1.14:1. The cause was one line: body{background:#fff} on eight pages. So this is not a sweep of "things that looked a bit dim". It is the enumerated set: 31 selectors that paint a light background and 44 that hardcode dark text, found by parsing every stylesheet in the build rather than by looking. Each one below is restated as a token pair, so a future change to a token moves all of them together and none of them can drift apart again. Still scoped to :root[data-theme="dark"]. Light remains untouched. ------------------------------------------------------------------------ */ :root[data-theme="dark"]{ --verdigris:#69B8A4; --clay:#E0836B; --alarm:#2A1A1A; --alarm-ink:#E8737F; } /* THE GROUND. body{background:#fff} on eight pages -- the single line that took the room pages from "a bit washed out" to unreadable. */ :root[data-theme="dark"] body{background:var(--paper); color:var(--ink)} /* PANELS that were white or near-white */ :root[data-theme="dark"] .sheet, :root[data-theme="dark"] .plainstart, :root[data-theme="dark"] .node, :root[data-theme="dark"] .tpl, :root[data-theme="dark"] .chain, :root[data-theme="dark"] .pillar, :root[data-theme="dark"] .phys-body, :root[data-theme="dark"] .physician-body, :root[data-theme="dark"] th, :root[data-theme="dark"] table.log th{ background:var(--paper-raised); color:var(--ink); border-color:var(--edge); } /* PANELS that were warm cream -- these read as "set apart" and keep doing so */ :root[data-theme="dark"] .betaline, :root[data-theme="dark"] .vsi-checklist, :root[data-theme="dark"] .ask .u{ background:var(--notice); border-color:var(--notice-edge); color:var(--ink); } :root[data-theme="dark"] .betaline{color:var(--soft)} :root[data-theme="dark"] .betaline b{color:var(--ink)} :root[data-theme="dark"] .ask .u{color:var(--brass-deep)} :root[data-theme="dark"] .vsi-checklist > summary{color:var(--navy)} :root[data-theme="dark"] .vsi-checklist h4{color:var(--verdigris)} :root[data-theme="dark"] .vsi-cl-foot{color:var(--soft)} /* TEXT that was hardcoded dark and would have sat on the dark ground */ :root[data-theme="dark"] .vsi-copyright{color:var(--soft)} :root[data-theme="dark"] .vsi-copyright a:hover{color:var(--brass-deep)} :root[data-theme="dark"] .vsi-copyright .free{color:var(--verdigris)} :root[data-theme="dark"] .vsi-ack{color:var(--soft)} :root[data-theme="dark"] details .body, :root[data-theme="dark"] .q, :root[data-theme="dark"] .legal{color:var(--ink)} :root[data-theme="dark"] .pillar-h{color:var(--verdigris)} :root[data-theme="dark"] .pillar .tiny{color:var(--soft)} :root[data-theme="dark"] .ask-name-h{color:var(--brass-deep)} :root[data-theme="dark"] #vsi-campus > h2{color:var(--ink)} /* THE EVIDENCE GRADES. Their hues carry meaning -- they are not decoration, and the same four colours appear in the Venn -- so each keeps its hue and gains lightness rather than being flattened to one colour. */ :root[data-theme="dark"] .gA{color:#6FBF95} :root[data-theme="dark"] .gB{color:#79B7DC} :root[data-theme="dark"] .gC{color:#D9AE60} :root[data-theme="dark"] .gU{color:#B9A3D0} /* THE URGENT BAND. Fred's Tier 1. It has to stay the loudest thing on the page in either theme, so it gets its own dark ground rather than the ordinary panel. */ :root[data-theme="dark"] .ask-urgent, :root[data-theme="dark"] .tag-high, :root[data-theme="dark"] .tl-high{ background:var(--alarm); color:var(--ink); border-color:var(--alarm-ink); } :root[data-theme="dark"] .ask-urgent b, :root[data-theme="dark"] .tag-high, :root[data-theme="dark"] .tl-high{color:var(--alarm-ink)} /* THE CAMPUS OVERLAY. White frames around an iframe that is itself now dark; left as they were, they ring every room in a bright white border. */ :root[data-theme="dark"] .vsi-building, :root[data-theme="dark"] .vsi-bridge-inner, :root[data-theme="dark"] #vsi-bridge-frame{background:var(--paper)} :root[data-theme="dark"] .vsi-b-name, :root[data-theme="dark"] .vsi-b-go{color:var(--navy)} :root[data-theme="dark"] .vsi-b-why{color:var(--soft)} /* INERT CONTROLS and tracks -- grey on grey either way, but the greys were light */ :root[data-theme="dark"] .btn-next:disabled, :root[data-theme="dark"] .btn-send:disabled, :root[data-theme="dark"] .progress-bar, :root[data-theme="dark"] .timeline-track, :root[data-theme="dark"] .tl-track{background:var(--edge); color:var(--soft)} /* ------------------------------------------------------------------------ THE THIRD SOURCE: CSS that is not in a stylesheet. Two of the loudest blocks on the site are injected as strings from JavaScript -- safety.js writes the urgent band, crossings.js writes the specialties aside -- so a scan of the stylesheets does not see them at all. That is how the emergency list survived the first pass at 1.14:1 while everything around it was fixed. The room pages also carry their warning colours as their own tokens, --warn and --warnbg, set light in seven rooms. intake/start.html already had dark values for the same two names; those are the ones used here, so the two agree instead of being invented twice. ------------------------------------------------------------------------ */ :root[data-theme="dark"]{ --warnbg:#241416; /* both taken from intake/start.html, which already had them */ --warn:#E8737F; --card:#211D18; /* crossings.js reads var(--card,#fff) -- undefined until now */ } /* safety.js -- the urgent band */ :root[data-theme="dark"] .vsi-urgent-band{ background:var(--warnbg); color:var(--ink); border-color:var(--warn); } :root[data-theme="dark"] .vsi-urgent-band b{color:var(--warn)} /* the rooms' own red-flag list, which sits on --warnbg */ :root[data-theme="dark"] .flags{color:var(--ink); border-color:var(--warn)} :root[data-theme="dark"] .flags b, :root[data-theme="dark"] .flags strong{color:var(--warn)} /* crossings.js -- "the part no one is assigned to" */ :root[data-theme="dark"] .cross-aside, :root[data-theme="dark"] .cross-card{background:var(--card); color:var(--ink); border-color:var(--edge)} :root[data-theme="dark"] .cross-aside .cross-lead, :root[data-theme="dark"] .cross-aside-lead, :root[data-theme="dark"] .cross-lead{color:var(--navy)} :root[data-theme="dark"] .cross-ask, :root[data-theme="dark"] .cross-fine, :root[data-theme="dark"] .cross-more, :root[data-theme="dark"] .cross-who{color:var(--soft)} :root[data-theme="dark"] .cross-label{color:var(--brass-deep)} :root[data-theme="dark"] .cross-quote{background:var(--notice); color:var(--ink); border-color:var(--notice-edge)} /* ------------------------------------------------------------------------ THE ACTUAL ARCHITECTURE, found on the fourth look. The room pages do not hardcode their colours. They carry their own token palettes -- --acc, --accbg, --bg, --line, --warn, --warnbg -- and every rule already reads them through var(). So the rule-by-rule overrides above were treating symptoms. This block is the cause. And a dark palette for those tokens ALREADY EXISTED. help.html, resources.html, terms.html and rooms/talking-to-your-doctor.html each carry one, and it is good. The values below are lifted from help.html verbatim rather than invented, so the nineteen pages that never had one now match the four that did. What was wrong with it was not the colours. It was the trigger: @media (prefers-color-scheme: dark) The OS decides, and the lamp is not consulted. So on those four pages "Dim the lights" did nothing, and -- worse in the other direction -- a reader whose laptop is set to dark could not turn the lights UP. Those four media queries are now gated on :root:not([data-theme="light"]), which keeps the OS default and lets an explicit choice win. This is also why my first pass measured 107 failures on c3g and my second still measured 35: setting data-theme="dark" flipped the shared tokens while each room's own palette stayed light. Some of that mismatch I introduced. It is the same mistake in miniature -- a theme applied to the parts that were easy to find. ------------------------------------------------------------------------ */ :root[data-theme="dark"]{ /* verbatim from help.html's existing dark block, minus --ink and --soft, which the warm house palette above already sets and which read correctly on these */ --line:#333a42; --bg:#15181c; --warn:#e8737f; --warnbg:#241416; --acc:#8ec4e4; --accbg:#16242e; /* the same treatment for the token names the other builds use */ --border:#3A342B; --rule:#3A342B; --paper-2:#1E1B16; --paper-sunk:#1E1B16; --warm-white:#1B1815; --warm-cream:#1B1815; --teal-light:#17332C; --amber-light:#2E2314; --soft-sage:#1F2E22; --text:#EDE6D8; --text-dark:#EDE6D8; --text-mid:#A79C8B; --text-muted:#A79C8B; --text-light:#8C8375; } :root[data-theme="dark"] .urg{border-color:#4a2b2f} :root[data-theme="dark"] .money{border-color:#2c4a5e} /* Bare links. Two on the c3g room, and others elsewhere, carry no colour rule at all, so they fell through to the browser default #0000EE -- 1.95:1 on the dark ground, and a blue that belongs to no part of this design in either theme. Fixed in dark only; the light default is legible, and light is Fred's approved design, so it is reported rather than changed. */ :root[data-theme="dark"] a:not([class]):link{color:var(--brass-deep)} :root[data-theme="dark"] a:not([class]):visited{color:var(--soft)} /* ------------------------------------------------------------------------ THE LAST SEVEN PAGES. Measured across all 21 pages with the lamp on: 14 came back clean, and 132 failures remained on seven. These are those. ------------------------------------------------------------------------ */ /* how-i-work-with-ai.html and venn/index.html share a third palette -- a sage and verdigris set, --ink-soft / --ink-faint / --rule / --signal / --verdigris-deep -- with no dark values at all. 103 and 13 failures respectively, all from these six names. Each keeps its hue and gains the lightness the dark ground needs. */ :root[data-theme="dark"]{ --verdigris-deep:#7FD6BC; --ink-soft:#C6D2CE; --ink-faint:#9BA8A4; --signal:#E8907F; --paper-2:#1E1B16; --paper-sunk:#1E1B16; } /* prepare/index.html: the masthead is white text on background:var(--navy). In dark --navy inverts to a light warm ink, so white sat on near-white at 1.64:1. The bar keeps being a bar; it just stops borrowing a token that flipped under it. */ :root[data-theme="dark"] .header{background:var(--paper-raised); border-bottom:1px solid var(--edge)} :root[data-theme="dark"] .header-title{color:var(--ink)} :root[data-theme="dark"] .header-sub{color:var(--soft)} :root[data-theme="dark"] .header-ver{color:var(--soft)} /* intake/index.html: literal `background: white` on the cards, which no token could reach. */ :root[data-theme="dark"] .avatar-message, :root[data-theme="dark"] .method-card, :root[data-theme="dark"] .manual-input-form, :root[data-theme="dark"] .timeline-builder, :root[data-theme="dark"] .story-card{ background:var(--paper-raised); color:var(--ink); border-color:var(--edge); } /* the print button: white on --acc, which is a pale blue in dark */ :root[data-theme="dark"] .print{background:var(--acc); color:var(--paper)} /* rooms/vermont-common-sense.html: rgba() versions of the light ink, which are invisible to any search for a hex and unreachable by a token. */ :root[data-theme="dark"] .standfirst, :root[data-theme="dark"] .lens-sub, :root[data-theme="dark"] .lenses__question{color:var(--soft)} :root[data-theme="dark"] .lenses__label{color:var(--ink)} /* intake/index.html's heading colour, the last token without a dark value */ :root[data-theme="dark"]{--deep-teal:#7FBFD0; --rich-navy:#C9D6EA; --warm-coral:#E8A08A} /* intake/index.html's primary button: white on --deep-teal, which lightens in dark. The button keeps its colour; the label stops being white on it. */ :root[data-theme="dark"] .btn{color:var(--paper)} /* ------------------------------------------------------------------------ THE SVG PASS -- and the reason it is a separate pass. The first audit read `color` on every element. SVG text is painted with `fill`, so for every diagram on the site it measured the wrong property. That cut both ways and I reported both halves wrongly: - It invented twenty failures on venn/index.html. Those labels were always 10.1:1 and 16.7:1. I told Fred they were his to rule on. There was nothing to rule on. - It hid eighteen real ones -- the small crossings Venn inside the "part no one is assigned to" aside, on four room pages, at 1.22:1 in dark. Measuring the wrong property looks exactly like measuring correctly. The check that caught it was reading one failing element's actual computed fill. ------------------------------------------------------------------------ */ /* crossings.js paints its three circle labels from COLOURS = ['#2d8c7a','#1a2e4a','#c4762a'] as inline fill attributes. A presentation attribute loses to any CSS rule, so the labels can be re-coloured here -- but only once each carries its own class, which is the one-line change made to crossings.js beside this. Hues preserved; lightness raised for the dark ground. */ :root[data-theme="dark"] .venn-lb-0{fill:#69B8A4} /* teal */ :root[data-theme="dark"] .venn-lb-1{fill:#9DB8DC} /* navy */ :root[data-theme="dark"] .venn-lb-2{fill:#D9A05B} /* amber */ :root[data-theme="dark"] .venn-oc{fill:#D9A05B} :root[data-theme="dark"] .cross-label{color:#D9A05B} /* ------------------------------------------------------------------------ LIGHT MODE. Not introduced by this session and not previously measured: 101 elements below 4.5:1, nearly all of them in a narrow 3.4-4.2 band -- the footer, the "Free to patients, permanently" line, the room-state chips, the crossings label. Close enough to look fine and still under the line. Each colour below keeps its exact hue and saturation and loses only lightness, by the smallest amount that clears 4.5:1 on the palest ground it appears on. The teal moves #2d8c7a -> #27796A. Held side by side you can see it; on the page you cannot. Scoped so dark keeps its own values. ------------------------------------------------------------------------ */ :root:not([data-theme="dark"]) .vsi-copyright{color:#676D7B} :root:not([data-theme="dark"]) .vsi-copyright a{color:#676D7B} :root:not([data-theme="dark"]) .vsi-copyright .free{color:#27796A} :root:not([data-theme="dark"]) .vsi-checklist h4, :root:not([data-theme="dark"]) .vsi-cl h4{color:#2B8473} :root:not([data-theme="dark"]) .st{color:#3B7766} :root:not([data-theme="dark"]) .cross-label{color:#A56423} :root:not([data-theme="dark"]) .venn-oc{fill:#A56423} :root:not([data-theme="dark"]) .top-note, :root:not([data-theme="dark"]) .op-caption, :root:not([data-theme="dark"]) .byline{color:#626E6D} /* Four grounds are paler than the ones the first darkening pass was computed against, so the footer landed at 4.43 instead of clearing 4.5. Recomputed against white. */ :root:not([data-theme="dark"]) .vsi-copyright, :root:not([data-theme="dark"]) .vsi-copyright a{color:#63697A} :root:not([data-theme="dark"]) .vsi-copyright .free{color:#24735F} :root:not([data-theme="dark"]) .foot-l, :root:not([data-theme="dark"]) .foot-l span{color:#5E6A69} /* The crossings Venn labels, light side. The inline fills are the light palette and two of the three are under the line on white. */ :root:not([data-theme="dark"]) .venn-lb-0{fill:#27796A} :root:not([data-theme="dark"]) .venn-lb-2{fill:#A56423} /* prepare/index.html, light: a disabled Send at 1.47, a hint at 2.43, and the version line at 3.01 on the navy bar. Disabled should read as unavailable, not as absent. */ :root:not([data-theme="dark"]) .btn-send:disabled, :root:not([data-theme="dark"]) .btn-next:disabled{background:#D1D5DB;color:#4B5563} :root:not([data-theme="dark"]) .char-hint{color:#5F6672} :root:not([data-theme="dark"]) .header-ver{color:rgba(255,255,255,0.72)} :root:not([data-theme="dark"]) .header-sub{color:rgba(255,255,255,0.78)} /* the attribution under the Vygotsky line, the last one under 4.5 in light */ :root:not([data-theme="dark"]) .foot-q span{color:#5E6A69} /* Last updated. Agreed early; never built. Quiet, not hidden -- a reader deciding whether to trust a medical page is entitled to know how old it is, and a page that will not say is asking for trust it has not earned. The date is derived from the page's own visible text, so it cannot drift from what it describes. */ .lastup{ margin:.35rem 0 1.4rem; font-size:.86rem; line-height:1.5; color:var(--soft,#5c6274); } .lastup time{font-weight:600; color:var(--ink,#18213B)} :root[data-theme="dark"] .lastup time{color:var(--ink)} @media print{.lastup{color:#000}} /* ====================================================================== BUTTON CONTRAST — added 7 September 2026 after a full sweep of 8,374 text elements across 26 pages in both themes found 14 failures, all of them the same shape: a page-local button style that theme.css never overrode, so the dark rules darkened the surface underneath and left the button's own colours where they were. The earlier sweep reported "0 failures" because it measured whole pages and not the elements' own backgrounds. A button with its own background was being compared against the page behind it. These are scoped so light stays untouched except where light was also failing (commons, which failed in BOTH themes). ====================================================================== */ :root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-send, :root[data-theme="dark"] .btn-next, :root[data-theme="dark"] .go, :root[data-theme="dark"] .lenses__button, :root[data-theme="dark"] .rlens__button { background: #2f2a24 !important; color: #f2eee5 !important; border-color: #6b6055 !important; } :root[data-theme="dark"] .lenses__button *, :root[data-theme="dark"] .rlens__button * { color: #f2eee5 !important; } :root[data-theme="dark"] .lenses__button:hover, :root[data-theme="dark"] .rlens__button:hover, :root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .btn-next:hover { background: #3c352d !important; } /* commons/ failed in BOTH themes: white text on a pale grey button, 1.47:1. Fixed for light and dark rather than scoped to one. */ .btn-next { background: #1f4e6b; color: #ffffff; border-color: #17394e; } .btn-next:hover { background: #17394e; } /* "Free to patients, permanently" at 3.91:1, and the decorative arrow at 3.92:1 — both just short of 4.5. Darkened only in light mode. */ :root:not([data-theme="dark"]) .free { color: #1d6b5c; } :root:not([data-theme="dark"]) .arrow { color: #55605e; } /* Rather listen? — added 9 Sep 2026. No player library: the browser's own controls already work the way her phone taught her, and they keep working with JavaScript off. */ .listen{border:1px solid var(--line,#dfe3e8);border-radius:10px;padding:.9rem 1rem; margin:1.4rem 0;background:var(--bg,#fbfcfd)} .listen-h{font-weight:700;margin:0 0 .5rem} .listen audio{width:100%;max-width:36rem;display:block} .listen-b{margin:.6rem 0 0;font-size:.94rem;color:var(--soft,#5a6470)}