/* ============================================================================ theme-dark.css — dark override of the Chemeli daylight system, for the RaDa *web* surfaces (Officials portal, Co-op console, app hub). Adopts the RaDaConnect landing palette: near-black ground #0A0C10 + warm gold / field green / clay red. Loaded AFTER chemeli.css and app.css so it wins. THEME SWITCH (2026-07-25): every rule is scoped to html:not([data-theme="light"]) — dark stays the DEFAULT, and setting document.documentElement.dataset.theme='light' hands the page back to the Chemeli cream daylight system (the brand light theme). Pages persist the choice in localStorage('rada_theme') and set it pre-paint in . The phone app (Tu-RaDa) keeps the cream daylight theme — this is web-only. app.css is ~90% token-driven, so remapping the surface / ink / line tokens flips the bulk; the rules below patch the few hardcoded-light surfaces and the chip text-colours that assumed a light background. ============================================================================ */ html:not([data-theme="light"]){ color-scheme: dark; /* ── surfaces → dark (landing palette) ── */ --bg-cream: #0A0C10; /* app canvas / body */ --bg-paper: #14181F; /* raised cards / paper */ --bg-cream-dim: #1B212B; /* recessed wells, inset rows (a touch lighter than card) */ --bg-deep: #07090C; --bg-ink: #14181F; /* ── text → light ── */ --ink: #F5EFE3; --ink-soft: #AFBAB8; --ink-mute: #7C8783; /* ── hairlines → light, low-alpha ── */ --line: rgba(245,239,227,.10); --line-soft: rgba(245,239,227,.055); /* ── brand anchors kept; soft washes → translucent tints that read on dark ── */ --orange: #D8A056; --orange-deep: #B47432; --orange-soft: rgba(216,160,86,.15); --green: #6FA23F; --green-deep: #4F7C2C; --green-soft: rgba(111,162,63,.16); --red: #C06848; --red-soft: rgba(192,104,72,.18); --red-ink: #E0AE9C; --amber: #D69020; --amber-soft: rgba(214,144,32,.15); --amber-ink: #E8C58A; --blue: #6FA6C9; --blue-soft: rgba(111,166,201,.15); --blue-ink: #AECBD8; /* ── shadows → deep for dark ── */ --shadow-1: 0 2px 8px rgba(0,0,0,.35); --shadow-2: 0 2px 6px rgba(0,0,0,.40), 0 12px 28px rgba(0,0,0,.45); --shadow-3: 0 4px 12px rgba(0,0,0,.50), 0 24px 48px rgba(0,0,0,.55); } /* body — replace the cream radial wash with a dark one + warm glow (mirrors the landing) */ html:not([data-theme="light"]) body{ background: radial-gradient(1200px 700px at 16% -10%, #12161C, transparent 60%), radial-gradient(1000px 800px at 112% 120%, #0D1015, transparent 55%), var(--bg-cream); } /* ── NO CONTAINERS ───────────────────────────────────────────────────────── The landing's language: content floats on the ground, separated by space and hairlines — never boxed in bordered, filled, rounded rectangles. */ /* window chrome — full-bleed, no floating macOS card */ html:not([data-theme="light"]) .win{ inset: 0; border-radius: 0; border: none; background: transparent; box-shadow: none; } html:not([data-theme="light"]) .titlebar{ background: transparent; border-bottom: 1px solid var(--line); } html:not([data-theme="light"]) .lights{ display: none; } /* skeuomorphic traffic lights — gone */ html:not([data-theme="light"]) .light{ border-color: rgba(255,255,255,.10); } html:not([data-theme="light"]) .toolbar{ background: transparent; } html:not([data-theme="light"]) .nav{ background: transparent; } html:not([data-theme="light"]) .brand img{ background: #0E1116; } html:not([data-theme="light"]) .scroll::-webkit-scrollbar-thumb{ background: rgba(245,239,227,.14); border-color: var(--bg-cream); } /* cards, counters, KPIs → open blocks with a single hairline */ html:not([data-theme="light"]) .card{ background: transparent; border: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); } html:not([data-theme="light"]) .card.sel{ border-top-color: var(--orange); box-shadow: none; } html:not([data-theme="light"]) .count, html:not([data-theme="light"]) .kpi{ background: transparent; border: none; border-radius: 0; border-top: 1px solid var(--line); padding-left: 2px; padding-right: 2px; } /* feed rows → hairline list, no boxes */ html:not([data-theme="light"]) .frow{ background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--line-soft); } html:not([data-theme="light"]) .frow:hover{ background: rgba(245,239,227,.03); border-color: var(--line-soft); } /* tables already hairline-based — keep; wells/segments stay functional controls */ /* floating overlays keep a backdrop (they sit over maps/content and need it) */ html:not([data-theme="light"]) .seat-menu, html:not([data-theme="light"]) .maptip{ background: #12161C; border-color: var(--line); } html:not([data-theme="light"]) .map-legend, html:not([data-theme="light"]) .map-title{ background: rgba(14,17,22,.92); border-color: var(--line); } /* chips / states whose text colour assumed a light chip — go light on the new tinted washes */ html:not([data-theme="light"]) .nav-item.on{ color: var(--orange); } html:not([data-theme="light"]) .pstage.cur .plabel{ color: var(--orange); } html:not([data-theme="light"]) .rec .rt{ color: var(--ink); } html:not([data-theme="light"]) .wx-left .hl{ color: inherit; } /* weather banner stays its own daylight card — see note */ /* small borders that ringed against a light background */ html:not([data-theme="light"]) input[type=range]::-webkit-slider-thumb{ border-color: var(--bg-paper); } html:not([data-theme="light"]) .icon-btn .badge{ border-color: var(--bg-paper); } /* map placeholder tint before tiles paint */ html:not([data-theme="light"]) .mapwrap{ background: #101720; } /* NOTE: the .wx weather banner keeps its warm daylight gradient on purpose (a "sky" card with its own dark ink); revisit in a visual pass if it glares. */