/* ========================================================================== BUILT BY TOBY — DARK SCHEME Loaded AFTER css/style.css, only in a dark build. Pure override layer: style.css is not touched, so the approved light site cannot regress. Why an override layer and not a token flip. Two tokens in style.css carry two jobs each. --navy is both the heading colour on light grounds AND the background of every dark section. --offwhite is both the page ground AND the text colour on those dark sections. Inverting either token at :root fixes one job and breaks the other. So the unambiguous tokens are redefined here at :root — body text, muted text, hairlines, gold-on-light — and the ~40 rules that use an ambiguous token in its light-ground role are overridden explicitly below. The plane hierarchy. In the light scheme the page is off-white and dark sections punch out of it. Inverted, everything would collapse into one flat navy field and the drawing-set rhythm would go with it. So the dark scheme keeps four distinct grounds, darkest at the back: #080D18 page ground (was --offwhite) #0A1020 --sheet--ink-deep, .foot, .record, .project (unchanged) #0F172A --sheet--ink, .disc, .assembly, .env, .art-head (unchanged) #16203A panels: .matrix .register .pubs .form-shell (was --paper) .bring .tile .scope .explorer .art-note Every text/ground pair below was measured. Nothing ships under 4.5:1 for body-size text or 3:1 for large text and non-text contrast. ========================================================================== */ :root[data-theme="dark"]{ /* ---- body and muted text -------------------------------------------- */ /* --graphite was #334155 on off-white; inverted it is a light grey that holds 10.05:1 on #0F172A and 9.08:1 on the #16203A panels. */ --graphite:#BAC3D2; /* --ink-60 is the muted/notation colour: 7.02:1 on navy, 6.35:1 panel. */ --ink-60:#99A3B5; /* ---- hairlines ------------------------------------------------------- */ /* These were dark rules on light. Same weights, inverted. */ --rule:rgba(248,250,252,.12); --rule-mid:rgba(248,250,252,.22); --rule-strong:rgba(248,250,252,.40); /* ---- gold ------------------------------------------------------------ */ /* --gold-ink exists only for small gold text on a LIGHT ground (4.75:1 on paper). On a dark ground that job goes back to full --gold: 7.18:1 on the panels, 8.64:1 on the page ground. */ --gold-ink:#C8A96B; /* ---- the two new grounds -------------------------------------------- */ --ground:#080D18; --panel:#16203A; --panel-head:#233052; /* table/matrix header rows, lifted off the panel */ --panel-input:#0D1526; /* form fields, recessed below the panel */ } /* ---------------------------------------------------------------- page --- */ :root[data-theme="dark"] body{background:var(--ground)} /* Headings and emphasis were --navy on light. */ :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] strong{color:var(--offwhite)} /* -------------------------------------------------------------- panels --- */ :root[data-theme="dark"] .sheet--paper, :root[data-theme="dark"] .matrix, :root[data-theme="dark"] .register, :root[data-theme="dark"] .pubs, :root[data-theme="dark"] .form-shell, :root[data-theme="dark"] .bring, :root[data-theme="dark"] .tile, :root[data-theme="dark"] .scope > div, :root[data-theme="dark"] .explorer, :root[data-theme="dark"] .art-note{background:var(--panel)} /* Sub-tints that were dark-on-light wash. */ :root[data-theme="dark"] .mkey{background:rgba(248,250,252,.035)} :root[data-theme="dark"] .pub:hover{background:rgba(248,250,252,.04)} /* Gold hover washes need more alpha to register on a dark ground. */ :root[data-theme="dark"] .mcell:hover, :root[data-theme="dark"] .register tbody tr:hover, :root[data-theme="dark"] a.pub--live:hover{background:rgba(200,169,107,.11)} /* --------------------------------------------------------------- text ---- */ :root[data-theme="dark"] .titleblock dd, :root[data-theme="dark"] .measured b, :root[data-theme="dark"] .mkey h3, :root[data-theme="dark"] .register tbody th, :root[data-theme="dark"] .status-dot, :root[data-theme="dark"] .pullquote, :root[data-theme="dark"] .contact-facts dd, :root[data-theme="dark"] .art-body p strong{color:var(--offwhite)} /* The sheet reference bled through in dark ink; flip it to a light tint. */ :root[data-theme="dark"] .sheet-ref--ink{color:rgba(248,250,252,.30)} /* ------------------------------------------------------------- buttons --- */ /* .btn on a light ground was a navy outline that filled navy on hover. Inverted: light outline that fills light, text going back to navy. */ :root[data-theme="dark"] .btn{color:var(--offwhite);border-color:var(--rule-strong)} :root[data-theme="dark"] .btn:hover{background:var(--offwhite);color:var(--navy); border-color:var(--offwhite)} :root[data-theme="dark"] .btn--bare{color:var(--offwhite);border:0} :root[data-theme="dark"] .btn--bare:hover{background:none;color:var(--gold)} /* The gold fill is identical in both schemes, so its type stays navy in both. The .btn override above is 0-3-0 and outranks .btn--gold's 0-1-0, so it has to be restated here or the primary button goes white-on-gold at 2.14:1. */ :root[data-theme="dark"] .btn--gold{background:var(--gold);border-color:var(--gold); color:var(--navy)} :root[data-theme="dark"] .btn--gold:hover{background:var(--gold-dim); border-color:var(--gold-dim);color:var(--navy)} /* .foot-cta stays a solid gold band with navy type in both schemes — it is the one place the brand colour carries a whole section, and in dark it is the strongest accent on the site. Its .btn must not inherit the flip. */ :root[data-theme="dark"] .foot-cta h2, :root[data-theme="dark"] .foot-cta .btn{color:var(--navy);border-color:var(--navy)} :root[data-theme="dark"] .foot-cta .btn:hover{background:var(--navy);color:var(--gold); border-color:var(--navy)} /* --------------------------------------------------------------- chips --- */ /* Pressed state was a navy fill on light. A navy fill on a dark panel reads as nothing, so pressed becomes the gold fill. */ :root[data-theme="dark"] .chip{color:var(--graphite);border-color:var(--rule-mid)} :root[data-theme="dark"] .chip:hover{border-color:var(--gold);color:var(--offwhite)} :root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--gold); border-color:var(--gold);color:var(--navy)} /* --------------------------------------------------- header rows -------- */ /* .mrow--head and .register thead were --navy panels on white. On a #16203A panel that is darker than its own table, which inverts the hierarchy. Lift them instead. */ :root[data-theme="dark"] .mrow--head, :root[data-theme="dark"] .register thead th{background:var(--panel-head)} /* ---------------------------------------------------------------- form --- */ /* Inputs were off-white recessed in a white shell. Recess them below the panel instead of above it, and keep the focus lift. */ :root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea{color:var(--offwhite); background:var(--panel-input);border-color:var(--rule-mid)} :root[data-theme="dark"] .field input:focus, :root[data-theme="dark"] .field select:focus, :root[data-theme="dark"] .field textarea:focus{background:#111B31; border-color:var(--gold)} :root[data-theme="dark"] .field input::placeholder, :root[data-theme="dark"] .field textarea::placeholder{color:rgba(248,250,252,.62)} /* --------------------------------------------------------------- rules --- */ /* Grid gaps are painted by the container background showing through 1px gutters. On light those containers used --rule; the token flip above handles them. .hr likewise. Nothing further needed. */ /* --------------------------------------------------------- print ---------- */ /* The print block in style.css already forces a white ground and black type with !important, so a dark build prints identically to a light one. */ /* -------------------------------------------------- forced colours ------- */ /* Windows High Contrast strips the palette either way; the light scheme's behaviour is already correct and inherited. */