/* ═══════════════════════════════════════════════════════════════════════════ SYC HUB — DARK PALETTE (PROPOSAL — needs Ferry sign-off) Palette-only. This file re-maps the WAYFINDER :root tokens to a dark set. It ships nothing on its own: it only takes effect when the OS is in dark mode (Auto) or when a `data-theme` attribute is set on . The toggle button, the no-flash head script, and the per-user persistence are being built SEPARATELY (shared prefs module + user_prefs store) — NOT here. ── Activation (an explicit data-theme always wins; absent one, follow OS) ── :root[data-theme="dark"] → manual dark (toggle sets it) @media (prefers-color-scheme:dark) :root:not([data-theme]) → Auto: follow the device :root[data-theme="light"] → manual light, even on a dark OS (the :not([data-theme]) guard already excludes the Auto block when any data-theme is set, so manual light needs no token overrides — the page's own :root light defaults apply. The block below is kept, explicit, so color-scheme flips back and the override is unambiguous.) ⚠ AFFECTS DESKTOP TOO: in Auto mode, a dark-OS desktop user sees dark once this is linked + deployed. That is why it needs sign-off. Load order does not matter — [data-theme] / :not([data-theme]) out-specify a plain :root. To adopt: add to each hub page (it is already linked into the pages listed in MOBILE_AUDIT.md Part A3). The dark token list is duplicated in the two dark selectors below — keep the two copies in sync if you tune a value. ═══════════════════════════════════════════════════════════════════════════ */ /* ── manual DARK ─────────────────────────────────────────────────────────── */ :root[data-theme="dark"]{ color-scheme:dark; /* canvas + ink (inverted luminance; ink3 stays a muted mid so hints read) */ --bg:#0F1115; --surface:#181B21; --surface2:#1F232B; --inset:#252A33; --ink:#EDEFF2; --ink2:#B9BFC9; --ink3:#8A909C; --line:#2A2F38; --line2:#363C46; /* brand — lifted a touch so red keeps punch on a dark canvas */ --brand:#FF4D57; --brand-dark:#E23742; --brand-50:#2A1416; /* action pill — a light-neutral so the primary button reads against dark bg (its text is hard-coded #fff, kept legible on this mid tone) */ --action:#3A3F4A; --action-hover:#474D59; /* semantic — lighter foregrounds, deep-tint backgrounds */ --ok:#34D399; --ok-bg:#0E2A22; --warn:#F59E0B; --warn-bg:#2C2008; --danger:#F87171; --danger-bg:#2A1416; --info:#60A5FA; --info-bg:#12233F; --forecast:#60A5FA; --forecast-bg:#12233F; --cancel:#A78BFA; --cancel-bg:#1F1633; /* tour lines (TOUR·LANG chips): lifted fg + deep-tint bg */ --hp:#A78BFA; --hp-bg:#1F1633; --jtr:#F87171; --jtr-bg:#2A1416; --gho:#E879F9; --gho-bg:#2A1030; --che:#F59E0B; --che-bg:#2C2008; --roy:#22D3EE; --roy-bg:#0C2429; --ult:#34D399; --ult-bg:#0E2A22; --brick:#FB923C; --brick-bg:#2A1608; --litt:#FB7185; --litt-bg:#2A1017; --aga:#60A5FA; --aga-bg:#12233F; /* shadows read as depth on dark — deepen the ambient */ --sh:0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35); --sh-lg:0 8px 30px rgba(0,0,0,.55); } /* ── AUTO (no explicit choice yet → follow the device) ───────────────────── */ @media (prefers-color-scheme:dark){ :root:not([data-theme]){ color-scheme:dark; --bg:#0F1115; --surface:#181B21; --surface2:#1F232B; --inset:#252A33; --ink:#EDEFF2; --ink2:#B9BFC9; --ink3:#8A909C; --line:#2A2F38; --line2:#363C46; --brand:#FF4D57; --brand-dark:#E23742; --brand-50:#2A1416; --action:#3A3F4A; --action-hover:#474D59; --ok:#34D399; --ok-bg:#0E2A22; --warn:#F59E0B; --warn-bg:#2C2008; --danger:#F87171; --danger-bg:#2A1416; --info:#60A5FA; --info-bg:#12233F; --forecast:#60A5FA; --forecast-bg:#12233F; --cancel:#A78BFA; --cancel-bg:#1F1633; --hp:#A78BFA; --hp-bg:#1F1633; --jtr:#F87171; --jtr-bg:#2A1416; --gho:#E879F9; --gho-bg:#2A1030; --che:#F59E0B; --che-bg:#2C2008; --roy:#22D3EE; --roy-bg:#0C2429; --ult:#34D399; --ult-bg:#0E2A22; --brick:#FB923C; --brick-bg:#2A1608; --litt:#FB7185; --litt-bg:#2A1017; --aga:#60A5FA; --aga-bg:#12233F; --sh:0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35); --sh-lg:0 8px 30px rgba(0,0,0,.55); } } /* ── manual LIGHT (wins even on a dark OS) ─────────────────────────────────── The page's own :root already carries the light defaults, and the Auto block above is excluded whenever data-theme is present — so this only needs to flip color-scheme back. Left explicit per spec so the override is unambiguous. */ :root[data-theme="light"]{ color-scheme:light; } /* ── supplementary (2026-08-04): extra tokens a few pages (cover/checkin) use that aren't in the core palette above — dark equivalents so their borders and slate panels don't stay light on a dark canvas. Kept in both dark selectors, same as the palette. */ :root[data-theme="dark"]{ --danger-line:#4A2529; --ok-line:#1B4034; --warn-line:#40320F; --slate:#94A3B8; --slate-bg:#1E232C; --slate-line:#2E353F; --star:#F5C063; --star-bg:#2C2008; /* review-feed star chips (2026-09-03) */ } @media (prefers-color-scheme:dark){ :root:not([data-theme]){ --danger-line:#4A2529; --ok-line:#1B4034; --warn-line:#40320F; --slate:#94A3B8; --slate-bg:#1E232C; --slate-line:#2E353F; --star:#F5C063; --star-bg:#2C2008; } } /* the SYC wordmark is dark ink on transparent → on a dark canvas it vanishes. Sit it on a small white chip so it stays legible (harmless no-op if the asset already carries its own light background). */ :root[data-theme="dark"] #sycSide .wordmark img{ background:#fff; border-radius:6px } @media (prefers-color-scheme:dark){ :root:not([data-theme]) #sycSide .wordmark img{ background:#fff; border-radius:6px } } /* the entry-screen brand lockup has the same problem: dark ink on transparent. The rebuilt v2 pages solve it with invert+hue-rotate (ink goes light, the red pin rotates back to red) — same treatment here so the sign-in moment is on-brand in dark mode on every page. (2026-09-02 overnight pass) */ :root[data-theme="dark"] img.lockup, :root[data-theme="dark"] .lockup img{ filter:invert(1) hue-rotate(180deg) } @media (prefers-color-scheme:dark){ :root:not([data-theme]) img.lockup, :root:not([data-theme]) .lockup img{ filter:invert(1) hue-rotate(180deg) } }