/* theme.css - Shared theme token layer for MyFS Flights.
*
* Loaded BEFORE site.css / site_a.css / index.css in both HTML shells
* (Pages/_Host.cshtml and Pages/Shared/_Layout.cshtml).
*
* Two things live here:
* 1. The brand + alpha variables (moved out of the twin site sheets so there
* is a single source of truth shared by every stylesheet).
* 2. A semantic surface/token layer. Dark is the default (bare :root). Light
* is applied when is set (see js/theme.js). The
* no-flash inline script in each shell sets data-theme before first paint.
*
* Rule of thumb when editing the site sheets: page chrome (backgrounds, body
* text, borders, panels, popups) references these tokens so it flips with the
* theme. Colours that are intrinsic to a thing - brand-blue pills, the green
* "accept" button, validation red, the unread-notification dot, black text that
* sits on a permanently light-blue pill - stay literal and do NOT use tokens.
*/
:root {
/* --- Brand alpha steps (moved from site.css / site_a.css) --- */
--lalpha: 0.2; /* very low */
--mlalpha: 0.4; /* medium low */
--malpha: 0.5; /* medium */
--mhalpha: 0.6; /* medium high*/
--halpha: 0.8; /* high */
/* --- Brand blues as RGB triplets (used via rgba(var(--x), a)) --- */
--myfsblue: 89, 193, 238; /* #59c1ee */
--myfslightblue: 135, 213, 247; /* #87d5f7 */
--myfsdarkblue: 65, 147, 207; /* #4193cf */
--myfsultradarkblue: 0, 73, 126; /* #00497e */
/* --- Fixed brand chrome: header + footer keep these in BOTH themes.
The logo asset is drawn for a dark ground, so the app chrome stays
brand-blue regardless of the content theme (decision 5 Aug 2026). --- */
--chrome-bg: #00497e; /* brand ultradark blue (--myfsultradarkblue) */
--chrome-fg: #ffffff;
--chrome-muted: #cfe4f5;
--chrome-border: rgba(255, 255, 255, 0.14);
/* ===== Semantic tokens - DARK (default) ===== */
color-scheme: dark;
--surface-bg: #000000; /* page background */
--surface-fg: #ffffff; /* primary text */
--surface-muted-fg: #ccd1d1; /* de-emphasised text (nav/footer) */
--surface-faint-fg: #e0e0e0; /* timestamps etc. */
/* Card surface used by Home, Explore, the flight pages and the public hubs.
Dark: a translucent brand-navy wash that lifts a card off the black page.
Light: the same white card on the grey page that Search and Plans use — the
tint inverts in light mode (a darker card on a white page), which read as a
different design language across the app. The two strengths differ only
marginally and exist to preserve the dark rendering exactly. */
--panel-tint: rgba(var(--myfsultradarkblue), .16);
--panel-tint-strong: rgba(var(--myfsultradarkblue), .18);
--panel-tint-hover: rgba(var(--myfsultradarkblue), .32);
/* Card edge. Dark: a faint brand-blue line, which is all a card needs against black.
Light: the same slate border Search and Plans use - the blue line is invisible
against a white card on the grey page, leaving cards looking like they float.
Two strengths so the dark rendering is preserved exactly. */
--panel-border: rgba(var(--myfslightblue), .14);
--panel-border-2: rgba(var(--myfslightblue), .18);
--surface-panel: #1a1a1a; /* elevated panel / read msg */
--surface-panel-2: #303030; /* panel hover */
--surface-panel-overlay: rgba(9, 9, 9, 0.98); /* slide-in notification tab */
--border-color: #808080; /* default divider (was gray) */
--border-slate: #36454f; /* box outlines */
--border-strong: #ffffff; /* emphatic borders / active underline */
--divider: lightgray; /* */
--scrollbar-track: #000000;
--scrollbar-thumb: #737373;
--overlay-tint: rgba(255, 255, 255, 0.1); /* faint tint on dark chrome */
--popup-bg: #000000; /* map popups */
--popup-fg: #ffffff;
/* Accent for links and inline highlights. On dark that is the brand light blue; on
light the same blue is unreadable, so it darkens. #17669e was already written by hand
in several places (FlightFull, _LayoutPublic) - this is that value with a name. */
--link-accent: rgb(var(--myfslightblue));
}
:root[data-theme="light"] {
/* ===== Semantic tokens - LIGHT ===== */
color-scheme: light;
--surface-bg: #f4f6f9;
--surface-fg: #1b2733;
--surface-muted-fg: #55636c;
--surface-faint-fg: #6b7880;
--surface-panel: #ffffff;
--surface-panel-2: #e7ecf1;
--surface-panel-overlay: rgba(255, 255, 255, 0.98);
/* White card on the grey page, matching Search and Plans. Both strengths collapse
to the same white here — the dark-mode distinction has no meaning on a light page. */
--panel-tint: var(--surface-panel);
--panel-tint-strong: var(--surface-panel);
--panel-tint-hover: var(--surface-panel-2);
/* Both collapse to the shared slate border; the dark-mode distinction is meaningless
on a light card. */
--panel-border: var(--border-slate);
--panel-border-2: var(--border-slate);
--border-color: #c7ced6;
--border-slate: #c7ced6;
--border-strong: #4193cf; /* white would vanish on light - use brand blue */
--divider: #d6dbe0;
--scrollbar-track: #e3e7eb;
--scrollbar-thumb: #b3bcc4;
--overlay-tint: rgba(0, 0, 0, 0.06);
--popup-bg: #ffffff;
--popup-fg: #1b2733;
--link-accent: #17669e;
}
/* ===== Native form controls follow the theme app-wide (6 Aug 2026) =====
1) Chrome won't dark-theme a