/* notis — the theme bridge. * * The reader's own setting decides the theme. The design drives it from the * clock, which is a lovely idea and the wrong one for a publication: a reader who * has told their operating system they want dark does not want us overruling that * at nine in the morning. There is no JavaScript on this site, so honouring * `prefers-color-scheme` means restating the night tokens under a media query. * * The page ships `data-bn-theme="dawn"` on both and . Both, because * on an inner element only, the body's own background resolves from the light * defaults and a cream band flashes under a dark page on overscroll. * * So the override below targets the dawn case specifically. It raises specificity * with `:root` and it loads after the design system, so it wins on both counts. * A reader who later picks a theme explicitly gets `night` on the element, which * this rule deliberately does not touch, and the design system handles it. * * The block is COPIED from bn/tokens/colors.css and bn/tokens/dataviz.css, * generated rather than typed. The suite asserts the set of property names here * still matches the set there, so a token added to the design system and not to * this file is caught by a test rather than by a reader finding a light-grey rule * on a dark page. */ /* The policy beat's hue. The design system's categorical ramp yields four beat hues, not five: chart-7 is the pill's own ink in both themes. So the fifth beat is a pair of this sheet's own, a violet the palette itself avoids, which is why it is distinguishable from the rose. One value per theme, each on one line; swap it here and nowhere else. The dark value is read by both dark paths below (the media query, and a reader who chose night), so it is named once and referenced twice. `--beat-policy` in notis.css reads the result. */ :root { --beat-policy-hue: #8353C8; /* light */ --beat-policy-hue-night: #C3A6F2; /* dark */ } :root[data-bn-theme="night"] { --beat-policy-hue: var(--beat-policy-hue-night); } @media (prefers-color-scheme: dark) { /* `:not([data-js])`: once the script is running it owns the theme, reads the same media query as its starting value, and a reader who presses "dawn" in the sky control gets dawn. Without this exclusion the bridge would force night back on top of that press. */ :root[data-bn-theme="dawn"]:not([data-js]), :root[data-bn-theme="dawn"]:not([data-js]) body { color-scheme: dark; /* Surfaces — calm content zones */ --bn-bg: var(--bn-night-925); --bn-surface: var(--bn-night-900); --bn-surface-2: var(--bn-night-850); --bn-surface-3: var(--bn-night-800); --bn-inset: var(--bn-night-950); --bn-overlay: rgba(6, 10, 20, 0.62); --bn-glass: rgba(17, 26, 46, 0.78); /* Chrome — identity zones (nav, headers, heroes) */ --bn-chrome-bg: var(--bn-night-950); --bn-chrome-text: var(--bn-night-100); --bn-chrome-text-dim: var(--bn-night-300); --bn-grad-aurora: linear-gradient(150deg, #0B1526 0%, #0E2038 42%, #113632 78%, #123C31 100%); --bn-grad-aurora-rose: radial-gradient(120% 90% at 88% 8%, rgba(231,107,163,0.12), transparent 62%); --bn-grad-hero: linear-gradient(165deg, #0A101E 0%, #0F2440 55%, #11382C 100%); /* Text */ --bn-text: var(--bn-night-50); --bn-text-2: var(--bn-night-200); --bn-text-3: var(--bn-night-300); --bn-text-disabled: var(--bn-night-500); --bn-text-inverse: var(--bn-night-950); /* Borders */ --bn-border-subtle: #1B2843; --bn-border: #26365A; --bn-border-strong: #35486F; /* Interactive (glacier) — night buttons are moonlit: light fill, dark label */ --bn-link: var(--bn-sky-300); --bn-link-hover: var(--bn-sky-200); --bn-action: var(--bn-sky-300); --bn-action-hover: var(--bn-sky-200); --bn-action-press: var(--bn-sky-400); --bn-on-action: var(--bn-night-950); --bn-action-subtle: rgba(116, 168, 233, 0.14); --bn-action-subtle-hover: rgba(116, 168, 233, 0.22); --bn-selected: rgba(116, 168, 233, 0.16); --bn-spotlight-strong: rgba(116, 168, 233, 0.07); /* row-hover spotlight core */ --bn-spotlight-soft: rgba(116, 168, 233, 0.035); /* Semantic — exclusive hues */ --bn-success-fill: var(--bn-green-300); --bn-on-success: var(--bn-night-950); --bn-success-text: var(--bn-green-300); --bn-success-subtle: rgba(76, 203, 151, 0.14); --bn-success-border: rgba(76, 203, 151, 0.45); --bn-danger-fill: var(--bn-red-300); --bn-danger-hover: var(--bn-red-200); --bn-on-danger: var(--bn-night-950); --bn-danger-text: var(--bn-red-300); --bn-danger-subtle: rgba(233, 119, 87, 0.14); --bn-danger-border: rgba(233, 119, 87, 0.50); --bn-warning-fill: var(--bn-amber-300); --bn-on-warning: var(--bn-night-950); --bn-warning-text: var(--bn-amber-300); --bn-warning-subtle: rgba(224, 172, 71, 0.13); --bn-warning-border: rgba(224, 172, 71, 0.45); --bn-info-text: var(--bn-sky-300); --bn-info-subtle: rgba(116, 168, 233, 0.13); --bn-info-border: rgba(116, 168, 233, 0.45); /* Identity accents (decorative zones only) */ --bn-accent-green: var(--bn-green-400); --bn-accent-rose: var(--bn-rose-400); --bn-accent-gold: var(--bn-gold-300); /* Horizon mark (theme-adaptive, used by AppLogo) */ --bn-logo-sky-a: #4CCB97; --bn-logo-sky-b: #E76BA3; --bn-logo-ground: #22314F; /* Focus — glacier ring with a gentle aurora glow */ --bn-focus-ring: var(--bn-sky-300); --bn-focus-glow: 0 0 0 3px rgba(76, 203, 151, 0.28), 0 0 14px rgba(76, 203, 151, 0.22); /* Soft depth */ --bn-shadow-pool: rgba(2, 6, 14, 0.55); /* cursor-pooled tilt shadow */ --bn-shadow-1: 0 1px 2px rgba(4, 8, 16, 0.4); --bn-shadow-2: 0 4px 14px rgba(4, 8, 16, 0.45); --bn-shadow-3: 0 12px 36px rgba(3, 6, 14, 0.55); --bn-glow-green: 0 0 24px rgba(76, 203, 151, 0.18); --bn-glow-rose: 0 0 24px rgba(231, 107, 163, 0.16); --bn-skeleton-a: var(--bn-night-850); --bn-skeleton-b: var(--bn-night-800); --bn-track: var(--bn-night-800); /* Categorical — aurora-derived */ --bn-chart-1: #4CCB97; /* aurora green */ --bn-chart-2: #74A8E9; /* glacier */ --bn-chart-3: #E76BA3; /* rose */ --bn-chart-4: #EDC672; /* gold */ --bn-chart-5: #5AD3C9; /* ice teal */ --bn-chart-6: #A9C86B; /* moss */ --bn-chart-7: #9FB1CC; /* slate */ --bn-chart-8: #D9C29A; /* sand */ --beat-policy-hue: var(--beat-policy-hue-night); /* the fifth beat, declared above */ /* Sequential (low → high), aurora green scale */ --bn-seq-1: #16283C; --bn-seq-2: #143C38; --bn-seq-3: #175547; --bn-seq-4: #1E7358; --bn-seq-5: #2C9970; --bn-seq-6: #4CCB97; --bn-seq-7: #8FE7C1; /* Diverging (negative rose ← neutral → positive green) */ --bn-div-n3: #E76BA3; --bn-div-n2: #B25579; --bn-div-n1: #714158; --bn-div-0: #33405C; --bn-div-p1: #2C5E54; --bn-div-p2: #2F9770; --bn-div-p3: #4CCB97; /* Chart chrome */ --bn-chart-grid: rgba(151, 173, 208, 0.13); --bn-chart-axis: rgba(151, 173, 208, 0.32); --bn-chart-label: var(--bn-night-300); --bn-chart-tooltip-bg: rgba(10, 16, 30, 0.92); --bn-chart-tooltip-text: var(--bn-night-50); /* Area/bar fills: gradient fades allowed (identity zone) */ --bn-chart-fill-1: linear-gradient(180deg, rgba(76,203,151,0.32), rgba(76,203,151,0.02)); --bn-chart-fill-2: linear-gradient(180deg, rgba(116,168,233,0.30), rgba(116,168,233,0.02)); --bn-chart-fill-3: linear-gradient(180deg, rgba(231,107,163,0.28), rgba(231,107,163,0.02)); } }