/* ========================================================================== Material Design 3 — token-based theme (plain CSS, no @material/web). Layer 1 below (--club-primary / --club-secondary) is set inline per club in base.html. Layer 2 derives the full M3 color-role system from those two brand colors using color-mix(), so every club gets a real M3 tonal relationship (containers, on-* pairs, outlines, tinted neutrals) without needing a build step to run real HCT tonal-palette generation. Error and the "extended" success/warning roles are fixed, not brand-derived — M3 itself treats error this way, and success/warning aren't roles M3 defines at all, so there's nothing brand-specific to derive them from. ========================================================================== */ :root { /* Layer 1: brand seeds. Overridden per-club inline in base.html — these are just a neutral fallback for pages that render with no club resolved. */ --club-primary: #0059A0; --club-secondary: #0C3C60; /* ---- Layer 2a: color roles derived from the brand seeds ---- */ --md-sys-color-primary: var(--club-primary); --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: color-mix(in oklch, var(--club-primary) 28%, white 72%); --md-sys-color-on-primary-container: color-mix(in oklch, var(--club-primary) 75%, black 25%); /* Fixed avatar palette: names choose a stable slot, independent of club branding. The muted rose intentionally is not the error role. */ --avatar-color-0-container: color-mix(in oklch, #8F486C 28%, white 72%); --avatar-color-0-on: color-mix(in oklch, #8F486C 75%, black 25%); --avatar-color-1-container: color-mix(in oklch, #96484A 28%, white 72%); --avatar-color-1-on: color-mix(in oklch, #96484A 75%, black 25%); --avatar-color-2-container: color-mix(in oklch, #924F26 28%, white 72%); --avatar-color-2-on: color-mix(in oklch, #924F26 75%, black 25%); --avatar-color-3-container: color-mix(in oklch, #825B00 28%, white 72%); --avatar-color-3-on: color-mix(in oklch, #825B00 75%, black 25%); --avatar-color-4-container: color-mix(in oklch, #67680B 28%, white 72%); --avatar-color-4-on: color-mix(in oklch, #67680B 75%, black 25%); --avatar-color-5-container: color-mix(in oklch, #407135 28%, white 72%); --avatar-color-5-on: color-mix(in oklch, #407135 75%, black 25%); --avatar-color-6-container: color-mix(in oklch, #00765A 28%, white 72%); --avatar-color-6-on: color-mix(in oklch, #00765A 75%, black 25%); --avatar-color-7-container: color-mix(in oklch, #00747B 28%, white 72%); --avatar-color-7-on: color-mix(in oklch, #00747B 75%, black 25%); --avatar-color-8-container: color-mix(in oklch, #006D93 28%, white 72%); --avatar-color-8-on: color-mix(in oklch, #006D93 75%, black 25%); --avatar-color-9-container: color-mix(in oklch, #3E639F 28%, white 72%); --avatar-color-9-on: color-mix(in oklch, #3E639F 75%, black 25%); --avatar-color-10-container: color-mix(in oklch, #63579B 28%, white 72%); --avatar-color-10-on: color-mix(in oklch, #63579B 75%, black 25%); --avatar-color-11-container: color-mix(in oklch, #7D4E88 28%, white 72%); --avatar-color-11-on: color-mix(in oklch, #7D4E88 75%, black 25%); --md-sys-color-secondary: var(--club-secondary); --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: color-mix(in oklch, var(--club-secondary) 28%, white 72%); --md-sys-color-on-secondary-container: color-mix(in oklch, var(--club-secondary) 75%, black 25%); --md-sys-color-tertiary: color-mix(in oklch, var(--club-primary) 50%, var(--club-secondary) 50%); --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: color-mix(in oklch, var(--md-sys-color-tertiary) 28%, white 72%); --md-sys-color-on-tertiary-container: color-mix(in oklch, var(--md-sys-color-tertiary) 75%, black 25%); /* Neutral surfaces are a standard M3 neutral scale, tinted a little towards the brand hue (M3's own neutral/neutral-variant palettes carry a hint of the primary's chroma rather than being pure gray). Light page/panel retuned again (docs/features/front-end-style-guide.md, token contract). #15's pass widened the *percentages* and still left the pair only 3.0 ΔL* apart, because the percentage was never the problem: the page's neutral base was LIGHTER than the panel's (#FFFBFE at L* 99.0 vs #F7F3FA at 96.3), so the page only read darker because a heavy 10% club tint dragged it down. The tint was doing a neutral's job — which is also why the page read blue rather than grey. Fixing it means moving the bases, not just the percentages: the page now sits on a genuinely darker neutral at HALF the tint, and the panel on a near-white one. Result is 6.8-7.2 ΔL* verified across navy/red/green/ purple club colours, with less brand saturation than before, not more. Note when retuning: color-mix(in oklch, ...) takes HUE from the chromatic input (these near-achromatic bases have a powerless hue), so the percentage controls lightness and saturation only — a page is always a desaturated version of its own club's hue. Check any change at more than one club colour; scripts/check_design_tokens.py does it. Dark mode's surface layering is explicitly NOT touched here — both design reviews confirmed it's already correct, and the 2026-08 redesign handoff's proposed dark values would have halved its separation. Only dark ACCENT colours needed work; see the nav active-state rules below. */ --md-sys-color-surface: color-mix(in oklch, var(--club-primary) 5%, #F1EEF4 95%); --md-sys-color-surface-dim: color-mix(in oklch, var(--club-primary) 6%, #DDD9E0 94%); --md-sys-color-surface-bright: color-mix(in oklch, var(--club-primary) 3%, #FFFBFE 97%); --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: color-mix(in oklch, var(--club-primary) 1%, #FDFCFE 99%); --md-sys-color-surface-container: color-mix(in oklch, var(--club-primary) 5%, #F1ECF4 95%); --md-sys-color-surface-container-high: color-mix(in oklch, var(--club-primary) 6%, #EBE6EE 94%); --md-sys-color-surface-container-highest: color-mix(in oklch, var(--club-primary) 7%, #E5E0E9 93%); --md-sys-color-on-surface: color-mix(in oklch, var(--club-primary) 6%, #1C1B1E 94%); --md-sys-color-on-surface-variant: color-mix(in oklch, var(--club-primary) 8%, #48454B 92%); --md-sys-color-outline: color-mix(in oklch, var(--club-primary) 5%, #78767A 95%); --md-sys-color-outline-variant: color-mix(in oklch, var(--club-primary) 4%, #C9C5CE 96%); --md-sys-color-inverse-surface: color-mix(in oklch, var(--club-primary) 6%, #313033 94%); --md-sys-color-inverse-on-surface: color-mix(in oklch, var(--club-primary) 3%, #F4EFF4 97%); --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; /* ---- Layer 2b: fixed roles (not brand-derived, same as upstream M3) ---- */ --md-sys-color-error: #B3261E; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #F9DEDC; --md-sys-color-on-error-container: #410E0B; /* Extended (app-specific) semantic roles, in the M3 "extended color" style — success/warning aren't part of the M3 spec, so they get their own fixed, non-brand-derived palettes rather than being invented from primary/secondary. */ --md-extended-color-success: #2E7D32; --md-extended-color-on-success: #FFFFFF; --md-extended-color-success-container: #C9F0C6; --md-extended-color-on-success-container: #072109; --md-extended-color-warning: #7A5900; --md-extended-color-on-warning: #FFFFFF; --md-extended-color-warning-container: #FFDEA6; --md-extended-color-on-warning-container: #271900; /* Fill-in request states are fixed roles, not club-derived: their meaning must survive a club-brand change. */ --state-needs-reply-text: #8A5A00; --state-needs-reply-border: #D3A24A; --state-needs-reply-bg: #FDF3E0; --state-open-text: #1F6B33; --state-open-border: #7FB08C; --state-open-bg: #EAF4EC; --state-sorted-text: #2A2F36; --state-sorted-border: #B3B8C0; --state-sorted-bg: #ECEEF1; --state-cancelled-text: #B4442E; --state-cancelled-border: #D79C8E; --state-cancelled-bg: #FAEEEB; /* ---- Shape scale ---- */ --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 4px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 999px; /* ---- Elevation (key + ambient shadow pairs) ---- */ --md-sys-elevation-0: none; --md-sys-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15); --md-sys-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15); --md-sys-elevation-3: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15); --md-sys-elevation-4: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15); --md-sys-elevation-5: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15); /* ---- State-layer opacities (hover/focus/pressed, per M3 spec) ---- */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.12; --md-sys-state-pressed-opacity: 0.12; /* ---- Type scale: size / line-height / weight / tracking per role ---- */ --md-sys-typescale-headline-large-size: 2rem; --md-sys-typescale-headline-large-line-height: 2.5rem; --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-medium-size: 1.75rem; --md-sys-typescale-headline-medium-line-height: 2.25rem; --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-small-size: 1.5rem; --md-sys-typescale-headline-small-line-height: 2rem; --md-sys-typescale-headline-small-weight: 400; --md-sys-typescale-title-large-size: 1.375rem; --md-sys-typescale-title-large-line-height: 1.75rem; --md-sys-typescale-title-large-weight: 400; /* Page title (h1) and section head (h2) deliberately aren't named M3 roles: the design review's target (28px/700 title, 18px/600 section head) needs more weight than M3's own scale goes to for any single role (title-medium tops out at 500) — a small, intentional departure for these two roles only, same "adapt, don't replace" approach as the colour system (Decision Log, see docs/work/0015-ui-design-review.md). Kept separate from title-large (still used unchanged by .brand and .season-details dd) so retuning headings doesn't resize that shared token's other consumers too. */ --page-title-size: 1.75rem; --page-title-line-height: 2.25rem; --page-title-weight: 700; --section-head-size: 1.125rem; --section-head-line-height: 1.5rem; --section-head-weight: 600; --md-sys-typescale-title-medium-size: 1rem; --md-sys-typescale-title-medium-line-height: 1.5rem; --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-medium-tracking: 0.009375rem; --md-sys-typescale-title-small-size: 0.875rem; --md-sys-typescale-title-small-line-height: 1.25rem; --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-title-small-tracking: 0.00625rem; --md-sys-typescale-body-large-size: 1rem; --md-sys-typescale-body-large-line-height: 1.5rem; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-tracking: 0.03125rem; --md-sys-typescale-body-medium-size: 0.875rem; --md-sys-typescale-body-medium-line-height: 1.25rem; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-tracking: 0.015625rem; --md-sys-typescale-body-small-size: 0.75rem; --md-sys-typescale-body-small-line-height: 1rem; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-tracking: 0.025rem; /* The fourth and last size in the scale (docs/features/front-end-style-guide.md, typography contract), in two weights. Replaces M3's label-large/medium/small trio, which was three sizes (14/12/11px) all at weight 500 across 45 consumers — the accidental third weight in an app that wants two. App-owned rather than retuned M3 roles, same call as --page-title-* (#16): depart deliberately in our own tokens, leave the named M3 roles meaning what M3 says. The label-* definitions are gone rather than left unused, so nothing can reach for weight 500 by accident. One size, two weights — --meta-weight for text you read (captions, detail labels, notes) and --meta-strong-weight for short emphatic labels (buttons, nav items, badges, table headers, pill text). The scale stays at four sizes (28/18/16/13) and the app at two weights. */ --meta-size: 0.8125rem; --meta-line-height: 1.125rem; --meta-tracking: 0.00625rem; --meta-weight: 400; --meta-strong-weight: 600; /* Display — a single number read at a glance (open-request counts, Global Admin summary values). Shipped by #16 as two bare 2rem literals; named here so it's a role rather than a coincidence. The second of the two deliberate 700s, with --page-title-weight. */ --display-size: 2rem; --display-line-height: 2.5rem; --display-weight: 700; /* Reserved for timestamps, IDs, domains and short uppercase labels — places where character-level precision is the point. Never body copy, headings or button text. */ --font-mono: SFMono-Regular, ui-monospace, Menlo, monospace; --mono-tracking: 0.1em; /* Club-brand highlight stripe colour for "box" components (header, .profile-card, .empty-state, .config-panel, .table-scroll, .info-dialog). Defaults to secondary; a box nested inside another box switches this to primary (see the nested-box `:is()` rule in "Cards & panels" below) so two nested stripes read as distinct layers instead of just doubling up on the same colour. */ --box-accent: var(--md-sys-color-secondary); /* Background for the same "box" components listed above. A nested box (e.g. .table-scroll inside .config-panel, as on "Club Users") steps this up one surface-container tier so it reads as sitting a shade lighter on top of its parent instead of blending flush into it — see the nested-box `:is()` rule below, which overrides this the same way it overrides --box-accent. */ --box-surface: var(--md-sys-color-surface-container-low); /* .button-danger's fill and text (docs/features/front-end-style-guide.md). Destructive actions use a solid fill on a dedicated, non-theme-switching pair (#8C1D18 / #F9DEDC) so both themes render the same bold dark-fill treatment and visually separate from transparent-fill status pills (.status-pill.status-cancelled). Declared once with no dark-mode override. */ --button-danger-bg: #8C1D18; --button-danger-ink: #F9DEDC; /* Hints the browser to theme its own native chrome (scrollbars, form control defaults, etc.) for whichever scheme is actually active — "light dark" here since :root itself is the light palette until one of the overrides below (system dark, or an explicit override) wins. */ color-scheme: light dark; } /* ========================================================================== Dark mode — three-way: system preference (auto, the default), or an explicit override persisted client-side (see the theme switcher script in base.html, which sets/clears documentElement[data-theme]). Every token below is the exact same brand-derivation technique as the light palette above, just re-rooted in dark neutrals — and, for the accent pairs (primary/secondary/tertiary/success/warning), with the tone direction inverted the way real M3 dark schemes do: the plain role (e.g. "primary") becomes the light, legible-on-dark-surface tone, and "on-primary" becomes the dark tone that was primary-container's own on-color in light mode — so an accent still reads as the same brand hue, just flipped to work against a near-black surface instead of a near-white one. Colour-scheme media query first, explicit override second — deliberate order: an explicit choice must always win regardless of source order, but keeping "system, then explicit" here matches the light-mode-first structure above and keeps this file readable top-to-bottom as "increasingly specific wins." The :not([data-theme="light"]) guard is what actually lets an explicit light choice override a dark system preference; :root[data-theme="dark"]'s own higher specificity is what lets an explicit dark choice override a light system preference. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --md-sys-color-primary: color-mix(in oklch, var(--club-primary) 55%, white 45%); --md-sys-color-on-primary: color-mix(in oklch, var(--club-primary) 75%, black 25%); --md-sys-color-primary-container: color-mix(in oklch, var(--club-primary) 40%, black 60%); --md-sys-color-on-primary-container: color-mix(in oklch, var(--club-primary) 20%, white 80%); --avatar-color-0-container: color-mix(in oklch, #8F486C 60%, black 40%); --avatar-color-0-on: color-mix(in oklch, #8F486C 20%, white 80%); --avatar-color-1-container: color-mix(in oklch, #96484A 60%, black 40%); --avatar-color-1-on: color-mix(in oklch, #96484A 20%, white 80%); --avatar-color-2-container: color-mix(in oklch, #924F26 60%, black 40%); --avatar-color-2-on: color-mix(in oklch, #924F26 20%, white 80%); --avatar-color-3-container: color-mix(in oklch, #825B00 60%, black 40%); --avatar-color-3-on: color-mix(in oklch, #825B00 20%, white 80%); --avatar-color-4-container: color-mix(in oklch, #67680B 60%, black 40%); --avatar-color-4-on: color-mix(in oklch, #67680B 20%, white 80%); --avatar-color-5-container: color-mix(in oklch, #407135 60%, black 40%); --avatar-color-5-on: color-mix(in oklch, #407135 20%, white 80%); --avatar-color-6-container: color-mix(in oklch, #00765A 60%, black 40%); --avatar-color-6-on: color-mix(in oklch, #00765A 20%, white 80%); --avatar-color-7-container: color-mix(in oklch, #00747B 60%, black 40%); --avatar-color-7-on: color-mix(in oklch, #00747B 20%, white 80%); --avatar-color-8-container: color-mix(in oklch, #006D93 60%, black 40%); --avatar-color-8-on: color-mix(in oklch, #006D93 20%, white 80%); --avatar-color-9-container: color-mix(in oklch, #3E639F 60%, black 40%); --avatar-color-9-on: color-mix(in oklch, #3E639F 20%, white 80%); --avatar-color-10-container: color-mix(in oklch, #63579B 60%, black 40%); --avatar-color-10-on: color-mix(in oklch, #63579B 20%, white 80%); --avatar-color-11-container: color-mix(in oklch, #7D4E88 60%, black 40%); --avatar-color-11-on: color-mix(in oklch, #7D4E88 20%, white 80%); --md-sys-color-secondary: color-mix(in oklch, var(--club-secondary) 55%, white 45%); --md-sys-color-on-secondary: color-mix(in oklch, var(--club-secondary) 75%, black 25%); --md-sys-color-secondary-container: color-mix(in oklch, var(--club-secondary) 40%, black 60%); --md-sys-color-on-secondary-container: color-mix(in oklch, var(--club-secondary) 20%, white 80%); --md-sys-color-tertiary: color-mix( in oklch, color-mix(in oklch, var(--club-primary) 50%, var(--club-secondary) 50%) 55%, white 45% ); --md-sys-color-on-tertiary: color-mix( in oklch, color-mix(in oklch, var(--club-primary) 50%, var(--club-secondary) 50%) 75%, black 25% ); --md-sys-color-tertiary-container: color-mix( in oklch, color-mix(in oklch, var(--club-primary) 50%, var(--club-secondary) 50%) 40%, black 60% ); --md-sys-color-on-tertiary-container: color-mix( in oklch, color-mix(in oklch, var(--club-primary) 50%, var(--club-secondary) 50%) 20%, white 80% ); /* Neutral tones start from the M3 baseline dark palette but widen the gap between tiers considerably (M3's own baseline container/ container-high/container-highest steps read as near-identical panels in practice — feedback from real use, 2026-08-11) so a card/header/table stands out clearly against the page background and against each other, not just against pure black. Tinted towards the brand hue by the same percentages light mode uses. */ --md-sys-color-surface: color-mix(in oklch, var(--club-primary) 3%, #141218 97%); --md-sys-color-surface-dim: color-mix(in oklch, var(--club-primary) 3%, #141218 97%); --md-sys-color-surface-bright: color-mix(in oklch, var(--club-primary) 6%, #545057 94%); --md-sys-color-surface-container-lowest: color-mix(in oklch, var(--club-primary) 2%, #0F0D13 98%); --md-sys-color-surface-container-low: color-mix(in oklch, var(--club-primary) 4%, #2C2A30 96%); --md-sys-color-surface-container: color-mix(in oklch, var(--club-primary) 5%, #36343B 95%); --md-sys-color-surface-container-high: color-mix(in oklch, var(--club-primary) 6%, #403D45 94%); --md-sys-color-surface-container-highest: color-mix(in oklch, var(--club-primary) 7%, #4B474F 93%); --md-sys-color-on-surface: color-mix(in oklch, var(--club-primary) 4%, #E6E0E9 96%); --md-sys-color-on-surface-variant: color-mix(in oklch, var(--club-primary) 6%, #CAC4D0 94%); --md-sys-color-outline: color-mix(in oklch, var(--club-primary) 8%, #938F99 92%); --md-sys-color-outline-variant: color-mix(in oklch, var(--club-primary) 6%, #49454F 94%); --md-sys-color-inverse-surface: color-mix(in oklch, var(--club-primary) 4%, #E6E0E9 96%); --md-sys-color-inverse-on-surface: color-mix(in oklch, var(--club-primary) 6%, #322F35 94%); --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; /* Fixed roles: real M3 baseline dark values, not brand-derived — same reasoning as the light palette's own fixed error role. */ --md-sys-color-error: #F2B8B5; --md-sys-color-on-error: #601410; --md-sys-color-error-container: #8C1D18; --md-sys-color-on-error-container: #F9DEDC; /* Extended success/warning: same tone-inversion formula as the accent pairs above, rooted at the identical light-mode base colours so both schemes are recognisably the same hue. The *-container tones (.flash-success/.toast backgrounds) are mixed a little lighter than the 40/60 split used elsewhere in this file — at 40% they read as barely distinguishable from the surrounding dark panel backgrounds. */ --md-extended-color-success: color-mix(in oklch, #2E7D32 55%, white 45%); --md-extended-color-on-success: color-mix(in oklch, #2E7D32 75%, black 25%); --md-extended-color-success-container: color-mix(in oklch, #2E7D32 60%, black 40%); --md-extended-color-on-success-container: color-mix(in oklch, #2E7D32 20%, white 80%); --md-extended-color-warning: color-mix(in oklch, #7A5900 55%, white 45%); /* 65%, not the 75% the other on-* roles use: the nav badge is 11px text on this pair and 75% only reached 4.26:1 on dark. Light mode is 6.45:1, so this brings the two themes into the same family. Caught by scripts/check_design_tokens.py. */ --md-extended-color-on-warning: color-mix(in oklch, #7A5900 65%, black 35%); --md-extended-color-warning-container: color-mix(in oklch, #7A5900 60%, black 40%); --md-extended-color-on-warning-container: color-mix(in oklch, #7A5900 20%, white 80%); --state-needs-reply-text: #BFA27E; --state-needs-reply-border: #E7CCA0; --state-needs-reply-bg: #422900; --state-open-text: #86AC8B; --state-open-border: #B8D3BF; --state-open-bg: #0A3214; --state-sorted-text: #82858A; --state-sorted-border: #D5D7DC; --state-sorted-bg: #101216; --state-cancelled-text: #DB9A8B; --state-cancelled-border: #EAC8C0; --state-cancelled-bg: #581D12; color-scheme: dark; } } :root[data-theme="dark"] { --md-sys-color-primary: color-mix(in oklch, var(--club-primary) 55%, white 45%); --md-sys-color-on-primary: color-mix(in oklch, var(--club-primary) 75%, black 25%); --md-sys-color-primary-container: color-mix(in oklch, var(--club-primary) 40%, black 60%); --md-sys-color-on-primary-container: color-mix(in oklch, var(--club-primary) 20%, white 80%); --avatar-color-0-container: color-mix(in oklch, #8F486C 60%, black 40%); --avatar-color-0-on: color-mix(in oklch, #8F486C 20%, white 80%); --avatar-color-1-container: color-mix(in oklch, #96484A 60%, black 40%); --avatar-color-1-on: color-mix(in oklch, #96484A 20%, white 80%); --avatar-color-2-container: color-mix(in oklch, #924F26 60%, black 40%); --avatar-color-2-on: color-mix(in oklch, #924F26 20%, white 80%); --avatar-color-3-container: color-mix(in oklch, #825B00 60%, black 40%); --avatar-color-3-on: color-mix(in oklch, #825B00 20%, white 80%); --avatar-color-4-container: color-mix(in oklch, #67680B 60%, black 40%); --avatar-color-4-on: color-mix(in oklch, #67680B 20%, white 80%); --avatar-color-5-container: color-mix(in oklch, #407135 60%, black 40%); --avatar-color-5-on: color-mix(in oklch, #407135 20%, white 80%); --avatar-color-6-container: color-mix(in oklch, #00765A 60%, black 40%); --avatar-color-6-on: color-mix(in oklch, #00765A 20%, white 80%); --avatar-color-7-container: color-mix(in oklch, #00747B 60%, black 40%); --avatar-color-7-on: color-mix(in oklch, #00747B 20%, white 80%); --avatar-color-8-container: color-mix(in oklch, #006D93 60%, black 40%); --avatar-color-8-on: color-mix(in oklch, #006D93 20%, white 80%); --avatar-color-9-container: color-mix(in oklch, #3E639F 60%, black 40%); --avatar-color-9-on: color-mix(in oklch, #3E639F 20%, white 80%); --avatar-color-10-container: color-mix(in oklch, #63579B 60%, black 40%); --avatar-color-10-on: color-mix(in oklch, #63579B 20%, white 80%); --avatar-color-11-container: color-mix(in oklch, #7D4E88 60%, black 40%); --avatar-color-11-on: color-mix(in oklch, #7D4E88 20%, white 80%); --md-sys-color-secondary: color-mix(in oklch, var(--club-secondary) 55%, white 45%); --md-sys-color-on-secondary: color-mix(in oklch, var(--club-secondary) 75%, black 25%); --md-sys-color-secondary-container: color-mix(in oklch, var(--club-secondary) 40%, black 60%); --md-sys-color-on-secondary-container: color-mix(in oklch, var(--club-secondary) 20%, white 80%); --md-sys-color-tertiary: color-mix( in oklch, color-mix(in oklch, var(--club-primary) 50%, var(--club-secondary) 50%) 55%, white 45% ); --md-sys-color-on-tertiary: color-mix( in oklch, color-mix(in oklch, var(--club-primary) 50%, var(--club-secondary) 50%) 75%, black 25% ); --md-sys-color-tertiary-container: color-mix( in oklch, color-mix(in oklch, var(--club-primary) 50%, var(--club-secondary) 50%) 40%, black 60% ); --md-sys-color-on-tertiary-container: color-mix( in oklch, color-mix(in oklch, var(--club-primary) 50%, var(--club-secondary) 50%) 20%, white 80% ); --md-sys-color-surface: color-mix(in oklch, var(--club-primary) 3%, #141218 97%); --md-sys-color-surface-dim: color-mix(in oklch, var(--club-primary) 3%, #141218 97%); --md-sys-color-surface-bright: color-mix(in oklch, var(--club-primary) 6%, #545057 94%); --md-sys-color-surface-container-lowest: color-mix(in oklch, var(--club-primary) 2%, #0F0D13 98%); --md-sys-color-surface-container-low: color-mix(in oklch, var(--club-primary) 4%, #2C2A30 96%); --md-sys-color-surface-container: color-mix(in oklch, var(--club-primary) 5%, #36343B 95%); --md-sys-color-surface-container-high: color-mix(in oklch, var(--club-primary) 6%, #403D45 94%); --md-sys-color-surface-container-highest: color-mix(in oklch, var(--club-primary) 7%, #4B474F 93%); --md-sys-color-on-surface: color-mix(in oklch, var(--club-primary) 4%, #E6E0E9 96%); --md-sys-color-on-surface-variant: color-mix(in oklch, var(--club-primary) 6%, #CAC4D0 94%); --md-sys-color-outline: color-mix(in oklch, var(--club-primary) 8%, #938F99 92%); --md-sys-color-outline-variant: color-mix(in oklch, var(--club-primary) 6%, #49454F 94%); --md-sys-color-inverse-surface: color-mix(in oklch, var(--club-primary) 4%, #E6E0E9 96%); --md-sys-color-inverse-on-surface: color-mix(in oklch, var(--club-primary) 6%, #322F35 94%); --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; --md-sys-color-error: #F2B8B5; --md-sys-color-on-error: #601410; --md-sys-color-error-container: #8C1D18; --md-sys-color-on-error-container: #F9DEDC; --md-extended-color-success: color-mix(in oklch, #2E7D32 55%, white 45%); --md-extended-color-on-success: color-mix(in oklch, #2E7D32 75%, black 25%); --md-extended-color-success-container: color-mix(in oklch, #2E7D32 60%, black 40%); --md-extended-color-on-success-container: color-mix(in oklch, #2E7D32 20%, white 80%); --md-extended-color-warning: color-mix(in oklch, #7A5900 55%, white 45%); /* 65% — see the matching note in the prefers-color-scheme block above. */ --md-extended-color-on-warning: color-mix(in oklch, #7A5900 65%, black 35%); --md-extended-color-warning-container: color-mix(in oklch, #7A5900 60%, black 40%); --md-extended-color-on-warning-container: color-mix(in oklch, #7A5900 20%, white 80%); --state-needs-reply-text: #BFA27E; --state-needs-reply-border: #E7CCA0; --state-needs-reply-bg: #422900; --state-open-text: #86AC8B; --state-open-border: #B8D3BF; --state-open-bg: #0A3214; --state-sorted-text: #82858A; --state-sorted-border: #D5D7DC; --state-sorted-bg: #101216; --state-cancelled-text: #DB9A8B; --state-cancelled-border: #EAC8C0; --state-cancelled-bg: #581D12; color-scheme: dark; } /* An explicit light override needs no token redefinitions of its own — :root's own values already are the light palette; this only exists so the dark media query's :not([data-theme="light"]) guard has something concrete to key off, and so native browser chrome is hinted correctly even when the system itself prefers dark. */ :root[data-theme="light"] { color-scheme: light; } /* =========================================================================== App shell and Today (#37). New chrome uses this documented spacing scale; existing page components deliberately retain their established margins. ========================================================================== */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; }