/* App-wide theme variables (AMT-16). One canonical set of custom properties, chosen per-theme by `data-theme` on , consumed by every stylesheet in the app (ui.css, map.css, database/styles.css) and by inline styles in React components (AppHeader, UserBadge, LoginPage, etc.) via var(--efb-*). This file is a static in index.html — loaded on every route, including ones that never touch MapPage's runtime stylesheet injection (Database, Admin, Login, Bug reports) — unlike ui.css/ map.css, which stay map-shell-specific and are injected only when a map page mounts. Semantic accent colours (amber/green/red) are fixed by aviation convention (amber = caution/IMC, green = go/VMC, red = limit/stop) — same hue family in every theme, only their lightness/saturation is adjusted per theme so they stay legible against that theme's background. Cyan is the interactive-accent colour and is free to vary more between themes for visual distinction. Magenta (course/ radial colour) follows the same rule as amber/green/red. `--efb-scheme` is `light` or `dark` — read by theme.ts to also set the native `color-scheme` CSS property and `data-bs-theme`, so browser-native form controls/scrollbars follow the theme too. */ :root, :root[data-theme="night"] { --efb-scheme: dark; --efb-bg-0: #0a0e15; --efb-bg-1: #121a25; --efb-bg-2: #1a2431; --efb-bg-3: #243040; --efb-hairline: #2b3646; --efb-hairline-soft: #212b39; --efb-ink-0: #f1f5fa; --efb-ink-1: #b7c2d1; --efb-ink-2: #71829a; --efb-cyan: #3fc7dd; --efb-cyan-dim: rgba(63, 199, 221, 0.14); --efb-amber: #ffb02e; --efb-amber-dim: rgba(255, 176, 46, 0.14); --efb-green: #48cc93; --efb-green-dim: rgba(72, 204, 147, 0.14); --efb-magenta: #dd5aa6; --efb-red: #e5594d; --efb-red-dim: rgba(229, 89, 77, 0.14); /* ~35%-alpha variants for borders/rings — stronger than -dim (backgrounds) but not full-strength text/icon colour. */ --efb-cyan-border: rgba(63, 199, 221, 0.35); --efb-amber-border: rgba(255, 176, 46, 0.35); --efb-green-border: rgba(72, 204, 147, 0.35); --efb-red-border: rgba(229, 89, 77, 0.35); --efb-card-bg: #1a2431; --efb-card-border: var(--efb-hairline); --efb-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); --efb-input-bg: rgba(255, 255, 255, 0.06); --efb-input-border: rgba(255, 255, 255, 0.2); --efb-sidebar-bg: #0e1520; --efb-sidebar-header-bg: #0a0e15; --efb-sidebar-text: #b8cfe4; --efb-sidebar-muted: #6a8aaa; --efb-sidebar-hover-bg: #1c2b3d; --efb-sidebar-hover-text: #e2f0fb; --efb-sidebar-active-bg: #205a8f; --efb-sidebar-active-text: #ffffff; --efb-sidebar-border: rgba(255, 255, 255, 0.07); --efb-table-head-bg: var(--efb-bg-2); --efb-table-head-text: var(--efb-ink-0); --efb-table-border: var(--efb-hairline); --efb-table-row-hover: rgba(255, 255, 255, 0.04); --efb-table-stripe: rgba(255, 255, 255, 0.02); /* Canvas-drawn charts (the elevation profile) can't use var() directly — ProfileDraw.ts reads these via getComputedStyle at draw time. */ --efb-chart-grid: rgba(255, 255, 255, 0.1); --efb-chart-datum: rgba(125, 211, 252, 0.45); /* Bootstrap's .btn-close is a black X icon by default (right for a light surface); this inverts it to white for a dark one — the same filter value Bootstrap's own .btn-close-white utility uses. */ --efb-btn-close-filter: invert(1) grayscale(100%) brightness(200%); } :root[data-theme="storm"] { --efb-scheme: dark; --efb-bg-0: #05070d; --efb-bg-1: #0d1420; --efb-bg-2: #141d2e; --efb-bg-3: #1c2840; --efb-hairline: #263349; --efb-hairline-soft: #1a2436; --efb-ink-0: #eef2fa; --efb-ink-1: #a8b6cc; --efb-ink-2: #5f7290; --efb-cyan: #5b9dff; --efb-cyan-dim: rgba(91, 157, 255, 0.16); --efb-amber: #ffb02e; --efb-amber-dim: rgba(255, 176, 46, 0.16); --efb-green: #48cc93; --efb-green-dim: rgba(72, 204, 147, 0.16); --efb-magenta: #e069b3; --efb-red: #f16657; --efb-red-dim: rgba(241, 102, 87, 0.16); --efb-cyan-border: rgba(91, 157, 255, 0.35); --efb-amber-border: rgba(255, 176, 46, 0.35); --efb-green-border: rgba(72, 204, 147, 0.35); --efb-red-border: rgba(241, 102, 87, 0.35); --efb-card-bg: #141d2e; --efb-card-border: var(--efb-hairline); --efb-card-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); --efb-input-bg: rgba(255, 255, 255, 0.05); --efb-input-border: rgba(255, 255, 255, 0.18); --efb-sidebar-bg: #080c15; --efb-sidebar-header-bg: #05070d; --efb-sidebar-text: #aebedc; --efb-sidebar-muted: #61728e; --efb-sidebar-hover-bg: #18233a; --efb-sidebar-hover-text: #e8eefc; --efb-sidebar-active-bg: #35619e; --efb-sidebar-active-text: #ffffff; --efb-sidebar-border: rgba(255, 255, 255, 0.06); --efb-table-head-bg: var(--efb-bg-2); --efb-table-head-text: var(--efb-ink-0); --efb-table-border: var(--efb-hairline); --efb-table-row-hover: rgba(255, 255, 255, 0.04); --efb-table-stripe: rgba(255, 255, 255, 0.02); --efb-chart-grid: rgba(255, 255, 255, 0.1); --efb-chart-datum: rgba(145, 196, 255, 0.45); --efb-btn-close-filter: invert(1) grayscale(100%) brightness(200%); } :root[data-theme="dusk"] { --efb-scheme: dark; --efb-bg-0: #2b303a; --efb-bg-1: #363c48; --efb-bg-2: #424957; --efb-bg-3: #4f5766; --efb-hairline: #5a6474; --efb-hairline-soft: #4a525f; --efb-ink-0: #f5f7fa; --efb-ink-1: #d4dae3; --efb-ink-2: #98a2b3; --efb-cyan: #5ecbde; --efb-cyan-dim: rgba(94, 203, 222, 0.2); --efb-amber: #f0a730; --efb-amber-dim: rgba(240, 167, 48, 0.2); --efb-green: #52c99a; --efb-green-dim: rgba(82, 201, 154, 0.2); --efb-magenta: #d9699f; --efb-red: #e6675a; --efb-red-dim: rgba(230, 103, 90, 0.2); --efb-cyan-border: rgba(94, 203, 222, 0.35); --efb-amber-border: rgba(240, 167, 48, 0.35); --efb-green-border: rgba(82, 201, 154, 0.35); --efb-red-border: rgba(230, 103, 90, 0.35); --efb-card-bg: #424957; --efb-card-border: var(--efb-hairline); --efb-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); --efb-input-bg: rgba(255, 255, 255, 0.08); --efb-input-border: rgba(255, 255, 255, 0.22); --efb-sidebar-bg: #313742; --efb-sidebar-header-bg: #2b303a; --efb-sidebar-text: #d8e0ea; --efb-sidebar-muted: #9aa5b5; --efb-sidebar-hover-bg: #4a5261; --efb-sidebar-hover-text: #f2f6fa; --efb-sidebar-active-bg: #3f76ae; --efb-sidebar-active-text: #ffffff; --efb-sidebar-border: rgba(255, 255, 255, 0.09); --efb-table-head-bg: var(--efb-bg-2); --efb-table-head-text: var(--efb-ink-0); --efb-table-border: var(--efb-hairline); --efb-table-row-hover: rgba(255, 255, 255, 0.06); --efb-table-stripe: rgba(255, 255, 255, 0.03); --efb-chart-grid: rgba(255, 255, 255, 0.14); --efb-chart-datum: rgba(150, 220, 235, 0.5); --efb-btn-close-filter: invert(1) grayscale(100%) brightness(200%); } :root[data-theme="day"] { --efb-scheme: light; --efb-bg-0: #f4f7fa; --efb-bg-1: #ffffff; --efb-bg-2: #eef2f7; --efb-bg-3: #e3e9f0; --efb-hairline: #d1dbe8; --efb-hairline-soft: #e2e8f0; --efb-ink-0: #1e293b; --efb-ink-1: #475569; --efb-ink-2: #7c8aa0; --efb-cyan: #0d8fa8; --efb-cyan-dim: rgba(13, 143, 168, 0.1); --efb-amber: #b8790a; --efb-amber-dim: rgba(184, 121, 10, 0.1); --efb-green: #1f9d6c; --efb-green-dim: rgba(31, 157, 108, 0.1); --efb-magenta: #b8447f; --efb-red: #c93f34; --efb-red-dim: rgba(201, 63, 52, 0.1); --efb-cyan-border: rgba(13, 143, 168, 0.35); --efb-amber-border: rgba(184, 121, 10, 0.35); --efb-green-border: rgba(31, 157, 108, 0.35); --efb-red-border: rgba(201, 63, 52, 0.35); --efb-card-bg: #ffffff; --efb-card-border: #dce4ed; --efb-card-shadow: 0 1px 4px rgba(30, 41, 59, 0.08); --efb-input-bg: #ffffff; --efb-input-border: #cbd5e1; --efb-sidebar-bg: #1a2840; --efb-sidebar-header-bg: #111d2e; --efb-sidebar-text: #b8cfe4; --efb-sidebar-muted: #6a8aaa; --efb-sidebar-hover-bg: #243d5c; --efb-sidebar-hover-text: #e2f0fb; --efb-sidebar-active-bg: #2563eb; --efb-sidebar-active-text: #ffffff; --efb-sidebar-border: rgba(255, 255, 255, 0.07); --efb-table-head-bg: #e9eef5; --efb-table-head-text: #1e293b; --efb-table-border: #d1dbe8; --efb-table-row-hover: #eef3fb; --efb-table-stripe: #f8fafc; /* Dark ink at low alpha — Day's canvas background is near-white, unlike the dark themes above. */ --efb-chart-grid: rgba(30, 41, 59, 0.1); --efb-chart-datum: rgba(13, 143, 168, 0.5); --efb-btn-close-filter: none; } :root[data-theme="paper"] { --efb-scheme: light; --efb-bg-0: #f7f4ee; --efb-bg-1: #fdfbf7; --efb-bg-2: #efeade; --efb-bg-3: #e3ddcf; --efb-hairline: #d8d0bd; --efb-hairline-soft: #e8e2d2; --efb-ink-0: #2b2620; --efb-ink-1: #5c5548; --efb-ink-2: #8a8272; --efb-cyan: #0f7d92; --efb-cyan-dim: rgba(15, 125, 146, 0.1); --efb-amber: #a86a0a; --efb-amber-dim: rgba(168, 106, 10, 0.1); --efb-green: #227a54; --efb-green-dim: rgba(34, 122, 84, 0.1); --efb-magenta: #a83d72; --efb-red: #b8392f; --efb-red-dim: rgba(184, 57, 47, 0.1); --efb-cyan-border: rgba(15, 125, 146, 0.35); --efb-amber-border: rgba(168, 106, 10, 0.35); --efb-green-border: rgba(34, 122, 84, 0.35); --efb-red-border: rgba(184, 57, 47, 0.35); --efb-card-bg: #fdfbf7; --efb-card-border: #e3ddcf; --efb-card-shadow: 0 1px 4px rgba(43, 38, 32, 0.08); --efb-input-bg: #fdfbf7; --efb-input-border: #d3cab5; --efb-sidebar-bg: #2e2a22; --efb-sidebar-header-bg: #241f19; --efb-sidebar-text: #e2dccb; --efb-sidebar-muted: #a89d84; --efb-sidebar-hover-bg: #3c362b; --efb-sidebar-hover-text: #f5f1e6; --efb-sidebar-active-bg: #8a5a1e; --efb-sidebar-active-text: #fff8ec; --efb-sidebar-border: rgba(255, 255, 255, 0.08); --efb-table-head-bg: #efeade; --efb-table-head-text: #2b2620; --efb-table-border: #d8d0bd; --efb-table-row-hover: #f4f0e6; --efb-table-stripe: #faf8f2; --efb-chart-grid: rgba(43, 38, 32, 0.1); --efb-chart-datum: rgba(15, 125, 146, 0.5); --efb-btn-close-filter: none; } /* Shared, theme-invariant values (layout, not colour). */ :root { --efb-radius: 6px; --efb-mono: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", ui-monospace, monospace; }