/* Backstage brand tokens (issue #550 / DECISIONS.md row 40). www is dark-always (P4, no toggle): the :root values below are the only values www ever sees. docs is prefers-color-scheme adaptive - the `html.docs` block under the light media query is the ONLY place light values exist, and only docs-page.njk sets the `docs` class on . */ :root { /* Backstage dark - default for www (always) and docs (dark preference) */ --surface: #110e1b; /* page bg */ --surface-low: #090710; /* footer / recessed wells */ --surface-raised: #1d1930; /* cards, panels */ --surface-highest: #28223e; /* hover fills, border base */ --border: var(--surface-highest); --ink: #edeaf7; /* body text, >= 4.5:1 on --surface */ /* Backstage indigo retune (issue #2990, companion to #2989's app-side V28 ruling) - brand accent deepened #7c6bff -> #4650e8. #4650e8 itself is too dark to pass 4.5:1 as TEXT on --surface (3.24:1), so --accent carries the app's own stageChordColor (#929cff, 7.64:1) for every on-dark-ground text/ icon/border role; --accent-strong stays the literal deep fill for backgrounds only. See base.css for the specific rules this split moved. */ --accent: #929cff; /* links, focus rings, borders - text/UI on dark ground */ --accent-strong: #4650e8; /* button/tile fills */ --accent-support: #4dd8e6; /* sparing: highlights, badges */ --ok: #3ddc97; /* semantic yes/success - table checks */ --warn: #e6b34d; /* semantic caution - lapsed/stale-data states (issue #2636) */ /* Neutral muted text/tint (issue #2636) - was referenced by .billing-signin-label with no definition anywhere in this file; that dangling var() silently fell through to inherited ink instead of reading dim. Value matches the admin page's own long-standing muted gray (service/join-api/app.py's #9c96b3), so "muted" means the same shade everywhere it appears. */ --muted: #9c96b3; --on-accent: #ffffff; /* text on a filled accent-strong bg - #4650e8 needs WHITE at 4.5:1 (5.88:1), unlike the old #7c6bff which needed dark ink (issue #2990, matches #2989's onPrimary ruling for the same fill) */ --max-width: 1080px; --docs-width: 760px; /* One corner radius, and no 999px pill token (issue #1562): the eyebrow pill is retired and the two remaining badges use a plain small radius, so keeping a pill token would only invite pills back. */ --radius: 12px; --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; /* Type scale (issue #986 / DECISIONS.md) - the ONLY font sizes the website may use. Rule: sentence text never below --text-sm; --text-xs is uppercase labels/badges only. rem only for these font-size tokens, no em - other properties (letter-spacing, min-width, etc.) may still use em. */ --text-xs: 0.8rem; /* uppercase chrome (docs-badge, badge-recommended) plus the kbd keyboard-shortcut glyph - a short UI label, not sentence text */ --text-sm: 0.9rem; /* microcopy, tagline, note, status, table th, btn-sm */ --text-base: 1rem; /* body, nav, buttons, inputs, footer, .lead, card h3 */ --text-lg: 1.3rem; /* section-level h3 (outside a card), invite code */ --text-xl: 1.75rem; /* h2 */ --text-display: clamp(2.4rem, 5vw, 3.4rem); /* h1 only */ --weight-regular: 400; --weight-semibold: 600; /* buttons, nav, error status */ --weight-bold: 700; /* headings, strong, footer h3 */ } /* docs light variant - paper-white reading surface, indigo accents in place of the dark-mode lavender. Scoped to html.docs so www never receives it regardless of OS preference. #2990 retune (crew-reviewer gap 1): this block still held the pre-retune violet (--accent #6655f6, --accent-strong #4f3fe0) after the dark theme above moved to the indigo family - every docs page renders (docs-page.njk), so an OS-level light-scheme visitor still saw the old brand color. --accent is Maria's #2990 palette table value directly (deep/on-light accent role #6655F6 -> #3A43C4; text/UI role on this white-ish ground, same job --accent plays for text/UI on the dark ground above). --accent-strong is re-derived, not pasted from --accent: the dark theme's own --accent-strong came from a hue/lightness/saturation deepening of its old value (#7c6bff -> #4650e8: H -10.6, S -22.1, L -11.8), so the same deepening applied to THIS block's old --accent-strong (#4f3fe0, H246 S72.2 L56.3) lands on #3941aa (H235.4 S50.1 L44.5) - a background-fill-only tone, matching the dark block's split (see the :root comment above). #3941aa clears 4.5:1 against --on-accent white (8.36:1) if ever used as a filled button per the dark-theme pattern, and clears 3:1 comfortably as the .btn-secondary:hover border it actually renders as today (docs' only current --accent-strong consumer, via header.njk's "bandbinder.app" link). */ @media (prefers-color-scheme: light) { html.docs { --surface: #ffffff; --surface-low: #f5f2fc; --surface-raised: #fbfafe; --surface-highest: #e9e4f7; --ink: #201c33; --accent: #3a43c4; --accent-strong: #3941aa; --accent-support: #087783; /* darkened from the raw #4DD8E6 family for 4.5:1 text/border contrast on the white surface */ --on-accent: #ffffff; --ok: #12805c; } }