/* ============================================================================ WxEye shared theme tokens: the single source of truth for app-wide theming. Linked by every USER-FACING surface (shell, for-you, viewer, mission, notify, more, raob, sting, credits, chat…). Back-office pages (admin, ops, mod, stats) deliberately do NOT link this and stay dark. Dark is the default: it is each surface's own :root values, so an unthemed or data-theme="dark" document looks exactly as it does today. The blocks below only re-tint the tokens surfaces already consume (--a, --tx*, --pn, --line, the viewer's --wx-* set) plus shared glass + nav tokens. html[data-theme=…] outranks a surface's inline :root, so these win without touching each page's CSS. Structural per-surface treatments (For-You's reactive sky, glass cards) live in the surface; only the token VALUES live here. ============================================================================ */ /* ───────────────────────── SKY (immersive, glass-on-sky) ───────────────────── */ html[data-theme="sky"] { color-scheme: dark; /* base palette */ --a: #6db2ff; --a-rgb: 109,178,255; --bg: transparent; --pn: rgba(20,32,54,.52); --tx: #ffffff; --tx2: rgba(255,255,255,.74); --tx3: rgba(255,255,255,.52); --tx-rgb: 255,255,255; --line: rgba(255,255,255,.14); /* viewer token system (–wx-*) */ --wx-accent: #6db2ff; --wxa-accent: #6db2ff; --wx-text-strong: #ffffff; --wx-text-body: rgba(255,255,255,.78); --wx-text-eyebrow: rgba(255,255,255,.55); /* Both viewer consumers of --wx-surface-card (.wx-modal-card, #wx-stream-player) are READING surfaces sitting over a radar map, so they take the strong tier. */ --wx-surface-card: rgba(20,32,54,.88); --wx-surface-raised: rgba(28,42,68,.62); --wx-border-soft: rgba(255,255,255,.12); --wx-border-firm: rgba(255,255,255,.2); /* shared glass, in TWO tiers. --glass-bg decorative/at-a-glance surfaces (feed cards, list rows, nav). --glass-bg-strong anything you READ THROUGH: popups, sheets, modals, side panels. Over a busy radar frame or a photographic sky the .42 tier turns body copy to mush, so reading surfaces get near-opaque and lean on BLUR (not transparency) to still read as glass. Raise the blur before lowering the alpha. */ --glass-bg: rgba(18,30,52,.42); --glass-border: rgba(255,255,255,.16); --glass-blur: blur(22px) saturate(1.25); --glass-bg-strong: rgba(20,32,54,.88); --glass-blur-strong: blur(30px) saturate(1.35); --glass-shadow-strong: 0 26px 70px rgba(6,12,28,.62), 0 0 0 1px rgba(255,255,255,.09); /* bottom nav */ --nav-bg: rgba(16,26,44,.72); --nav-blur: blur(18px) saturate(1.2); --nav-border: rgba(255,255,255,.14); --nav-fg: rgba(255,255,255,.6); --nav-accent: #6db2ff; --nav-accent-soft: rgba(109,178,255,.85); --nav-accent-glow: rgba(109,178,255,.6); /* app frame (shell) */ --app-bg: #24344f; /* The sky itself. Surfaces with no #fy-sky layer of their own paint this on (`background: var(--sky-backdrop)`). Lives here as a VALUE so the eight-odd surfaces that use it cannot drift apart when it is retuned. */ --sky-backdrop: radial-gradient(120% 55% at 22% 24%, rgba(255,255,255,.34), transparent 46%), radial-gradient(90% 45% at 82% 56%, rgba(255,255,255,.20), transparent 52%), radial-gradient(140% 80% at 50% 2%, #a9c8ec 0%, #7ea6d6 34%, transparent 70%), linear-gradient(180deg, #5f8bc6 0%, #4c72b0 52%, #3e5f98 100%); } /* ───────────────────────── LIGHT (white / blue / black) ────────────────────── */ html[data-theme="light"] { color-scheme: light; --a: #1667e0; --a-rgb: 22,103,224; --bg: #eef2f8; --pn: #ffffff; /* The alpha ladder is NOT the dark one mirrored. Dark ink on white loses contrast far faster than white ink on black at the same alpha: .42 reads as a comfortable muted grey on a black card but only 2.7:1 on a white one, under AA for the 9-11px labels these tiers are used for. Tuned so --tx2 lands ~6:1 and --tx3 ~4.4:1 while keeping three distinct steps. */ --tx: #0f1620; --tx2: rgba(15,22,32,.72); --tx3: rgba(15,22,32,.55); --tx-rgb: 15,22,32; --line: rgba(15,22,32,.09); --wx-accent: #1667e0; --wxa-accent: #1667e0; --wx-text-strong: #0f1620; --wx-text-body: rgba(15,22,32,.72); --wx-text-eyebrow: rgba(15,22,32,.58); --wx-surface-card: #ffffff; --wx-surface-raised: #ffffff; --wx-border-soft: rgba(15,22,32,.09); --wx-border-firm: rgba(15,22,32,.16); --glass-bg: rgba(255,255,255,.7); --glass-border: rgba(15,22,32,.08); --glass-blur: blur(18px); --glass-bg-strong: rgba(255,255,255,.95); --glass-blur-strong: blur(24px); --glass-shadow-strong: 0 26px 70px rgba(15,25,55,.20), 0 0 0 1px rgba(15,22,32,.08); --nav-bg: rgba(255,255,255,.92); --nav-blur: blur(16px); --nav-border: rgba(15,22,32,.10); --nav-fg: rgba(15,22,32,.62); --nav-accent: #1667e0; --nav-accent-soft: rgba(22,103,224,.8); --nav-accent-glow: rgba(22,103,224,.45); --app-bg: #eef2f8; }