/* Broadsheet · Night — DCO-02 §11, UI-29. Load AFTER broadsheet-warm.css. Every rule scoped to [data-theme="night"] on , every variable name identical to the warm file's. The ramps are RE-POINTED, not inverted. Broadsheet's contract is semantic: 100–300 are tinted fills, 500 is the base, 700–900 are inks for text. That contract holds here; only the hexes behind it move. Nothing in any component, style object or screen changes to produce this — if a screen needs a conditional to look right in dark, the token is wrong (§11.2). Warm, not black: the ground is a warm near-black so the paper's character and the duotoned photographs survive. Contrast-verified against --color-surface (#211e19), the tighter of the two grounds, so --color-bg passes automatically. Measured, not asserted: neutral-600 5.96:1 metadata floor — never lighter for text neutral-700 8.01:1 accent-700 9.33:1 accent at text size accent-2-700 8.29:1 text 14.24:1 --color-neutral-500 and below are hairlines, borders and icons only. */ [data-theme="night"] { --color-bg: #171512; --color-surface: #211e19; --color-text: #f2ede4; --color-divider: #332f28; --color-neutral-100: #1d1a16; --color-neutral-200: #262219; --color-neutral-300: #332f28; --color-neutral-400: #4a453b; --color-neutral-500: #6b6456; --color-neutral-600: #a39a89; --color-neutral-700: #bdb3a1; --color-neutral-800: #d8d0c2; --color-neutral-900: #efe9de; --color-accent: #3aa8cd; --color-accent-100: #10262e; --color-accent-200: #163a47; --color-accent-300: #1f5468; --color-accent-400: #2b7d9b; --color-accent-500: #3aa8cd; /* On night the pressed step goes LIGHTER, not darker (§11.2). */ --color-accent-600: #58bcdd; --color-accent-700: #7fcde8; --color-accent-800: #a6dcf0; --color-accent-900: #cdeaf7; --color-accent-2: #f0619b; --color-accent-2-100: #33101f; --color-accent-2-200: #4d1830; --color-accent-2-300: #6e2444; /* §11.2 abbreviates accent-2's 400, 600 and 900 with an ellipsis and never states them. Interpolated on the same perceptual spacing as the steps it does give, with 600 going lighter to match the accent ramp's night rule. Recorded as a defect in the change order rather than passed off as specified. */ --color-accent-2-400: #b83c6b; --color-accent-2-500: #f0619b; --color-accent-2-600: #f37fae; --color-accent-2-700: #f79cc1; --color-accent-2-800: #fabad4; --color-accent-2-900: #fcd5e4; --color-process-yellow: #f0c132; /* On a dark ground elevation is an EDGE, not a drop (§11.2). */ --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.055); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.66); /* The per-calendar feed colours (§11.4). They identify feeds, not roles, which is why they are the one legitimate literal set — but they were literals in a COMPONENT, and dark cannot be a conditional in a component. So they moved into the token files, where the night pass is a re-point like every other ramp. Each is lifted ~25% in lightness at constant hue; all eight clear 4.5:1 on this surface, measured. */ --cal-feed-1: #2ba4cd; --cal-feed-2: #46a07f; --cal-feed-3: #cd8864; --cal-feed-4: #a77cba; --cal-feed-5: #d79828; --cal-feed-6: #70a9cd; --cal-feed-7: #d2807e; --cal-feed-8: #6faf61; } /* §11.4 warns about this one specifically: broadsheet-warm.css sets the page ground with an `html, body` selector at root, so the night file must beat it on SPECIFICITY, not merely on load order. The attribute selector plus the element gives it that. */ html[data-theme="night"], html[data-theme="night"] body { background: var(--color-bg); color: var(--color-text); } /* Form controls, scrollbars and the checkbox accent-color follow the theme only if the UA is told which one it is (§11.3). */ html[data-theme="night"] { color-scheme: dark; } /* The duotone wrapper is tuned to a light ground; on night it goes to mud without a lower desaturation and a raised floor (§11.4). */ [data-theme="night"] .halftone, [data-theme="night"] .cmyk { filter: saturate(0.85) brightness(1.12); }