/* ============================================================ Fly GACA — Tools dark-theme overlay When the user has the SPA's dark theme set (data-theme="dark" on , persisted via localStorage["flygaca-theme"]), remap the light "ivory"/"ink" tokens that the standalone tool pages use to their dark equivalents. One-shot remap — no per-element rewrites. ============================================================ */ [data-theme="dark"] { --ivory: var(--falcon-night); --ivory-warm: var(--falcon-deep); --ivory-edge: var(--falcon-mist); --ink: var(--moon); --ink-soft: var(--moon-soft); --ink-mute: var(--moon-mute); } /* Fix a couple of patterns that don't follow the token convention */ [data-theme="dark"] body { background: var(--falcon-night); } /* Tables in the briefer / VFR / aerodromes use raw rgba dashed dividers that look anaemic on dark — bump them up. */ [data-theme="dark"] table th { color: var(--moon-mute); } [data-theme="dark"] th, [data-theme="dark"] td { border-bottom-color: var(--falcon-mist); } /* The W&B SVG envelope axis labels and tick text use hard-coded ink colors; tone them to moon-soft when dark. */ [data-theme="dark"] .envelope text { fill: var(--moon-soft) !important; } [data-theme="dark"] .envelope line { stroke: var(--moon-mute) !important; } [data-theme="dark"] .area-svg text { fill: var(--moon-soft); } /* Procedural-separation diagrams (procsep.html) use raw #0A0E12 for runways and labels — those become invisible on the dark canvas. Lift them. */ [data-theme="dark"] .scen-detail svg line[stroke="#0A0E12"], [data-theme="dark"] .scen-detail svg [stroke="#0A0E12"] { stroke: var(--moon); } [data-theme="dark"] .scen-detail svg text[fill="#0A0E12"], [data-theme="dark"] .scen-detail svg [fill="#0A0E12"] { fill: var(--moon); } [data-theme="dark"] .scen-detail svg text[fill="#7A8590"] { fill: var(--moon-mute); } /* Saudi outline map (airspace.html) — flip land fill + label colors on dark */ [data-theme="dark"] .map-svg #ksaLand { fill: rgba(26,42,56,0.85); stroke: var(--moon-mute); } [data-theme="dark"] .map-svg .map-airport circle[fill="#0A0E12"] { fill: var(--moon); } [data-theme="dark"] .map-svg .map-airport text { fill: var(--moon); } /* Aerodrome card runway diagrams (aerodromes.html) — flip ink-coloured strokes/labels */ [data-theme="dark"] .ad-rwy-diagram svg rect { fill: rgba(15,26,36,0.5); } [data-theme="dark"] .ad-rwy-diagram svg line[stroke="#0A0E12"] { stroke: var(--moon); } [data-theme="dark"] .ad-rwy-diagram svg text[fill="#0A0E12"] { fill: var(--moon); } [data-theme="dark"] .ad-rwy-diagram svg text[fill="#7A8590"] { fill: var(--moon-mute); } [data-theme="dark"] .ad-rwy-diagram svg line[stroke="#7A8590"] { stroke: var(--moon-mute); } /* Dialogue practice mask in saelpt looks weird on dark — invert sheen */ [data-theme="dark"] .turn.hidden .msg { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 4px, rgba(255,255,255,0.10) 4px, rgba(255,255,255,0.10) 8px); } [data-theme="dark"] .turn.hidden .msg::after { color: var(--moon-mute); } /* Light-gun signal swatches in vfr.html — the white ones become invisible */ [data-theme="dark"] .light-square.white, [data-theme="dark"] .light-square.flash-w { border-color: var(--moon-soft); } /* Form inputs lose the cream contrast — give them an explicit dark bg */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--falcon-mist); color: var(--moon); border-color: var(--falcon-mist-2, #243749); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--moon-mute); } /* Verdict pills retain their semantic colors on dark — only soften OK bg */ [data-theme="dark"] .verdict.ok { background: rgba(143,201,168,0.10); color: var(--falcon-sage-bright); }