/* FleetMon design tokens — "Signal Box" in FleetMon blue (audit 2026-10, section 9; chrome colour
   chosen 2026-10-23). Loaded first by every desktop, auth, info and pop-out base template; base.css
   keeps its older names (--brand-primary, --brand-accent, ...) as aliases of these.
   New CSS uses these tokens instead of hex values and font names. */

@import "../vendor/fonts/inter/inter.css";
@import "../vendor/fonts/ibm-plex-mono/ibm-plex-mono.css";

:root {
    /* Type: Inter for text and data (same apparent size as the earlier Poppins, which the font
       sizes were tuned for; Barlow read too small), IBM Plex Mono for identifiers (event codes,
       timestamps, coordinates). Swapping the text font = this token + its folder in vendor/fonts */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, 'Liberation Mono', monospace;
    /* Type scale (audit DES-3): every font-size is one of these steps, guarded by tests/test_tokens.py */
    --fs-2xs: 11px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 26px;

    /* Chrome (top bar, sidebar): FleetMon blue, flat. White text on it is 6.1:1 — the former
       #7386D5 was 3.4:1 (audit A11Y-7) and stays only as the light brand tint. */
    --chrome: #4a5db0;
    --chrome-text: #ffffff;
    --chrome-text-muted: #e3e8ff;
    --chrome-hover: rgba(255, 255, 255, 0.12);
    --chrome-active: rgba(255, 255, 255, 0.20);
    --brand-light: #7386d5;
    --demo-badge: #e65100;    /* the DEMO / TEST label in the top bar */
    /* Train markers on Locations: the chrome blue, amber when the position is stale */
    --marker-from: #5a6dc0;
    --marker-stale-from: #f5c45e;
    --marker-stale-to: #e0a020;
    --marker-stale-ink: #3d2c00;

    /* Surfaces, lines, text */
    --surface-0: #f3f4f7;     /* page background */
    --surface-1: #ffffff;     /* cards, drawers, tables */
    --qr-bg: #ffffff;         /* behind a QR code: light in both themes (a scanner needs dark on light) */
    --surface-2: #f7f8fa;     /* table headers, quiet panels */
    --surface-3: #eceef2;     /* neutral fills: hover / pressed, read-only fields (audit DES-2) */
    --surface-inverse: #1f2433;   /* dark tooltips (.fm-tip) */
    --on-inverse: #e6e9f2;
    --on-inverse-muted: #939cb6;
    --on-inverse-accent: #a9b6ec;
    --line: #e1e4ea;
    --line-strong: #c9ced8;
    --field-border: #ced4da;        /* form fields: Bootstrap 4's .form-control border */
    --field-border-hover: #adb5bd;
    --text: #1a2130;
    --text-muted: #5c6678;    /* 5.9:1 on white */
    --text-subtle: #5f6b7a;   /* 5.4:1 on white; lighter greys only for icons, borders, disabled */
    --icon-subtle: #7a8391;   /* quiet icons and placeholder dashes: 3.2:1 or more on every light surface */

    /* Interaction */
    --accent: #4254b5;        /* links, selected states, text in the brand hue: 6.6:1 */
    --accent-hover: #36459a;
    --accent-soft: #eef1fb;
    --accent-border: #aab2e0;
    --row-selected: #0081c2cc;   /* a selected row in Search (white text on it) */
    --on-accent: #ffffff;     /* text and icons on --accent / --chrome / filled chips and buttons */
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--accent);

    /* Event priority — the one palette for chips, drawers, charts and ticks.
       *-bg/*-fg: chip; *-strong: marks on white (ticks, bars, dots, the alert edge). */
    --prio-a-bg: #f8d7da;
    --prio-a-fg: #721c24;
    --prio-a-strong: #c62839;
    --prio-b-bg: #fff3cd;
    --prio-b-fg: #856404;
    --prio-b-strong: #b98500;
    --prio-other-bg: #eceef2;
    --prio-other-fg: #5c6678;
    --prio-other-strong: #868e96;
    /* The other priorities' chips (base.css .prio-chip-c…e): orange, blue, grey */
    --prio-c-bg: #ffe8c4;
    --prio-c-fg: #8a5f08;
    --prio-d-bg: #dde6ff;
    --prio-d-fg: #36459a;
    --prio-e-bg: #dee2e6;
    --prio-e-fg: #5c6678;

    /* Status — never reuses the priority hues */
    --status-ok: #2c8a52;
    --status-warn: #a86a00;
    --status-offline: #5c6678;
    --status-unknown: #9aa3b2;
    --alert-edge: var(--prio-a-strong);
    --destructive: #b02a37;     /* destructive actions (remove), on hover / focus — not --danger: Bootstrap 4 defines that one */

    /* Messages (audit DES-2): what happened, not an event priority — a saved / sent / failed line, a
       notice. Same family of hues, own names, so priority colours mean priority only */
    --ok-bg: #e8f5ee;
    --ok-fg: #1d5a37;
    --ok-line: #b7dfc6;
    --warn-bg: #fff3cd;
    --warn-fg: #856404;
    --warn-line: #ffe69c;
    --error-bg: #fdecee;
    --error-fg: #7a1c26;
    --error-line: #f1aeb5;

    /* Geofences: inside / outside areas on maps and their labels — neither red nor amber (those are A / B) */
    --geo-inside: #14866d;
    --geo-inside-bg: #e3f4ef;
    --geo-outside: #7b4bb5;
    --geo-outside-bg: #efe8f8;

    /* Charts (audit DES-6), read by FM.chartColors() & co. in js/fm_core.js.
       Series: one palette for every chart — no red, orange or amber (they mean A, C, B and alerts),
       dark and light mixed; series 9+ repeat it dashed, 17+ dotted */
    --series-1: #4254b5;   /* blue */
    --series-2: #3f9ad6;   /* sky */
    --series-3: #14866d;   /* green */
    --series-4: #7b4bb5;   /* purple */
    --series-5: #c2589c;   /* pink */
    --series-6: #0f5f73;   /* teal */
    --series-7: #5c6678;   /* slate */
    --series-8: #9a8fd8;   /* lilac */
    /* Priority as bars and areas: the chips' hues, red / amber / orange also apart in lightness
       (the report level palette uses the same three). Thin marks on white keep --prio-*-strong */
    --chart-prio-a: #c62839;
    --chart-prio-b: #f0b429;
    --chart-prio-c: #e8772e;
    --chart-prio-d: #4254b5;
    --chart-prio-e: #7a8391;
    --chart-prio-f: #c9ced8;
    /* Speed on Routes: one hue, slate (standing) to deep teal (90+ km/h) — red and amber stay for events */
    --speed-0: #aeb8c6;
    --speed-30: #6e9cb3;
    --speed-60: #2c8296;
    --speed-90: #0e5566;

    /* Space and sizes */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --control-h: 30px;              /* icon buttons in drawer headers */
    --field-h: 31px;                /* toolbar fields and their buttons (Bootstrap 4 .form-control-sm / .btn-sm) */
    --row-h: 28px;
    --header-h: 44px;
    --drawer-w: 420px;

    /* Radii, elevation, motion */
    --r-sm: 3px;
    --r: 5px;
    --r-lg: 8px;
    --r-pill: 999px;
    --elev-1: 0 1px 2px rgba(21, 27, 38, 0.06);
    --elev-2: 0 6px 20px rgba(21, 27, 38, 0.14), 0 1px 3px rgba(21, 27, 38, 0.08);
    --elev-3: 0 16px 40px rgba(21, 27, 38, 0.22);
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* Overlay layers (Bootstrap: sticky 1020, fixed 1030, modal 1050) */
    --z-drawer-backdrop: 1039;
    --z-drawer: 1040;
    --z-fullscreen: 1042;   /* a page area in fullscreen (Search's table): over the top bar (1040), under the
                               Ctrl+K switcher (1045), dropdowns and modals (1050+); a drawer goes above it */
}

/* Dark theme: data-theme="dark" on <html>. The technician view first (audit MOB-1, set by
   tech/tech_theme.js), the desktop pages later (DES-12). Values from the audit's proposal; text
   contrast on --surface-1: --text 15:1, --text-muted 9.4:1. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --chrome: #26305e;
    --chrome-text-muted: #c9d1f2;
    --brand-light: #8fa0ff;

    --surface-0: #0b0f16;
    --surface-1: #131a24;
    --surface-2: #1a2230;
    --surface-3: #222b39;
    --surface-inverse: #2b3646;
    --on-inverse: #e9eef6;
    --on-inverse-muted: #b4bfcf;
    --on-inverse-accent: #c9d1f2;
    --line: #2b3646;
    --line-strong: #3a4658;
    --text: #e9eef6;
    --text-muted: #b4bfcf;
    --text-subtle: #8c98aa;
    --icon-subtle: #6b778a;

    --accent: #8fa0ff;
    --accent-hover: #a9b6ff;
    --accent-soft: #1d2540;
    --accent-border: #3d4a80;
    --on-accent: #0b0f16;
    --focus-ring: 0 0 0 2px #0b0f16, 0 0 0 4px var(--accent);

    /* Priority fills brighten, with dark ink on them (A 6.5:1, B 10.9:1, other 8.2:1) */
    --prio-a-bg: #ff5c6c;
    --prio-a-fg: #1a0508;
    --prio-a-strong: #ff5c6c;
    --prio-b-bg: #ffc533;
    --prio-b-fg: #241a00;
    --prio-b-strong: #ffc533;
    --prio-other-bg: #3a4658;
    --prio-other-fg: #e9eef6;
    --prio-other-strong: #8c98aa;
    --prio-c-bg: #ff9f43;
    --prio-c-fg: #231300;
    --prio-d-bg: #8fa0ff;
    --prio-d-fg: #0b0f16;
    --prio-e-bg: #3a4658;
    --prio-e-fg: #e9eef6;

    --status-ok: #4cc38a;
    --status-warn: #ffb547;
    --status-offline: #8c98aa;
    --status-unknown: #6b778a;
    --destructive: #ff6b78;

    --ok-bg: #17382a;
    --ok-fg: #7ee2ad;
    --ok-line: #2b6b4b;
    --warn-bg: #3a2e08;
    --warn-fg: #ffd666;
    --warn-line: #6b5310;
    --error-bg: #3b1218;
    --error-fg: #ff9aa5;
    --error-line: #7a2a35;
    --geo-inside: #4cc3a3;
    --geo-inside-bg: #163a33;
    --geo-outside: #b79cf0;
    --geo-outside-bg: #2c2140;

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --elev-2: 0 6px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --elev-3: 0 16px 40px rgba(0, 0, 0, 0.6);

    /* The desktop (DES-12): fields, the selected Search row (dark ink on it, --on-accent), charts brighter on
       the dark surface (the same hues; still no red / orange / amber in the series), Routes' speed scale
       light = fast on a dark map, the Locations markers */
    --field-border: #3a4658;
    --field-border-hover: #4b5870;
    --row-selected: #8fa0ffd9;
    --series-1: #8fa0ff;
    --series-2: #5cb8f0;
    --series-3: #4cc3a3;
    --series-4: #b79cf0;
    --series-5: #e889c2;
    --series-6: #3fb5c9;
    --series-7: #a3adbd;
    --series-8: #c4bcf5;
    --chart-prio-a: #ff5c6c;
    --chart-prio-b: #ffc533;
    --chart-prio-c: #ff9f43;
    --chart-prio-d: #8fa0ff;
    --chart-prio-e: #8c98aa;
    --chart-prio-f: #4b5870;
    --speed-0: #56637a;
    --speed-30: #4f8fa8;
    --speed-60: #3fb5c9;
    --speed-90: #8be3ea;
    --marker-from: #6b7fd6;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}