/* ========================================
   Fonts (self-hosted — CSP blocks external font CDNs)
   Hanken Grotesk: humanist grotesque in the airport-signage lineage, for
   all UI/display. B612 Mono: designed by Airbus for cockpit displays, for
   registrations, codes, timestamps and other aircraft data readouts.
   ======================================== */
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/hanken-grotesk.woff2') format('woff2');
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/hanken-grotesk-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'B612 Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/b612-mono.woff2') format('woff2');
}
@font-face {
    font-family: 'B612 Mono';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/b612-mono-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'B612 Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/b612-mono-bold.woff2') format('woff2');
}

/* ========================================
   CSS Custom Properties (Design Tokens)
   Palette: "apron at dusk" — desaturated slate chrome so the photos are
   the hero, with a single taxiway-amber signal accent. Token NAMES are
   preserved from the original Material scheme so every consumer keeps
   working; only the VALUES changed.
   ======================================== */
:root {
    /* Primary ramp — "radar" slate-blue. The workhorse interactive color:
       buttons (white text on 500+), links, focus rings, active states.
       500 holds ~4.95:1 on white text. */
    --primary-50: #ebf1f6;
    --primary-100: #d3e1ec;
    --primary-200: #b0cade;
    --primary-300: #86aecb;
    --primary-400: #5e90b4;
    --primary-500: #42759a;
    --primary-600: #38637f;
    --primary-700: #2e5069;
    --primary-800: #244050;
    --primary-900: #1a2f3a;

    /* Taxiway amber — THE signal accent. Used deliberately: active-tab
       underline, the card data-strip registration, key highlights. Amber
       fails contrast with white text, so text ON amber uses --accent-ink. */
    --accent: #f2b01e;
    --accent-hover: #d99a10;
    --accent-soft: #fcefcf;
    --accent-ink: #16202b;

    /* Accent Colors (semantic result states, desaturated to match) */
    --accent-green: #3e9b6e;
    --accent-green-dark: #2f7c57;
    --accent-orange: #f2b01e;
    --accent-orange-dark: #d99a10;
    --accent-red: #c94f42;
    --accent-red-dark: #a83c31;

    /* Neutral ramp — cool slate (not warm gray) */
    --gray-50: #f3f5f7;
    --gray-100: #e9edf1;
    --gray-200: #dde3e9;
    --gray-300: #c7d0d9;
    --gray-400: #a3b0bc;
    --gray-500: #7c8a98;
    --gray-600: #5c6875;
    --gray-700: #414b57;
    --gray-800: #28313b;
    --gray-900: #16202b;

    /* Semantic Colors (light) */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f5f7;
    --bg-tertiary: #e9edf1;
    --text-primary: #16202b;
    --text-secondary: #4b5966;
    --text-tertiary: #6b7885;
    --border-color: #dde3e9;
    --border-color-light: #eaeef2;

    /* Shadows — cool-tinted for the slate palette */
    --shadow-xs: 0 1px 2px rgba(22, 32, 43, 0.05);
    --shadow-sm: 0 1px 3px rgba(22, 32, 43, 0.09), 0 1px 2px rgba(22, 32, 43, 0.06);
    --shadow-md: 0 4px 6px rgba(22, 32, 43, 0.09), 0 2px 4px rgba(22, 32, 43, 0.06);
    --shadow-lg: 0 10px 15px rgba(22, 32, 43, 0.12), 0 4px 6px rgba(22, 32, 43, 0.06);
    --shadow-xl: 0 20px 25px rgba(22, 32, 43, 0.12), 0 10px 10px rgba(22, 32, 43, 0.05);

    /* Typography */
    --font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'B612 Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* State / status colors (mode-invariant), retuned to the slate palette */
    --state-danger: #c94f42;
    --state-danger-bg: #f7e0dd;
    --state-danger-text: #7a2b22;
    --state-danger-border: #eec4be;
    --state-success: #3e9b6e;
    --state-success-bg: #d9efe4;
    --state-success-text: #1f5b3f;
    --state-success-border: #b9e0cd;
    --state-warning: #f2b01e;
    --state-warning-bg: #fcefcf;
    --state-warning-text: #7a5910;
    --state-warning-border: #f6dd9c;
    --state-info: #42759a;
    --state-info-bg: #dce8f0;
    --state-info-text: #24404f;
    --state-info-border: #b8d2e2;
    --state-primary-bg: #dce8f0;
    --state-primary-text: #24404f;
    --state-primary-border: #b8d2e2;
    --state-neutral-bg: #e9edf1;
    --state-neutral-text: #414b57;
    --state-neutral-border: #dde3e9;

    /* Deep hover shades for accent/primary buttons (mode-invariant) */
    --primary-hover: #38637f;
    --accent-red-darker: #8f3128;
    --accent-green-darker: #245f42;
    --accent-orange-darker: #b8830f;

    /* Code / JSON block colors — slate terminal */
    --code-bg: #1a2733;
    --code-text: #cdd9e3;
    --code-border: #2e4050;
    --code-key: #7fb4d8;
    --code-string: #6fc79a;
    --code-number: #e6a3b5;
    --code-boolean: #f0b458;
    --code-null: #8695a2;

    /* Misc roles (mode-invariant) */
    --spinner-track: #e9edf1;

    /* Mode-varying semantic roles (redefined under body.dark-mode) */
    --muted: #6b7885;
    --disabled-bg: #e9edf1;
    --disabled-text: #a3b0bc;
    --loading-overlay-bg: rgba(243, 245, 247, 0.95);
    --callout-warning-bg: #fcefcf;
    --callout-warning-text: #7a5910;
    --form-error-bg: rgba(201, 79, 66, 0.1);
    --form-error-text: #c94f42;
    --admin-badge-bg: var(--accent);
    --admin-badge-text: var(--accent-ink);
    --select-arrow: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%236b7885" d="M2 0L0 2h4L2 0zM2 5L0 3h4L2 5z"/></svg>');

    /* Categorical chart palette — fixed order, CVD-validated on the light
       surface (see dataviz validator). Amber/green/red UI accents are
       deliberately NOT reused here: chart identity stays distinct from
       status. Read via getComputedStyle in chartTheme(). */
    --chart-1: #3266a8;
    --chart-2: #c77a16;
    --chart-3: #3e9b6e;
    --chart-4: #7b57a3;
    --chart-5: #c0453b;
    --chart-6: #0f9c94;
    --chart-7: #a85c2e;
    --chart-8: #9e466b;
    /* Recessive chart chrome (grid/ticks/labels) */
    --chart-grid: rgba(22, 32, 43, 0.08);
    --chart-tick: #6b7885;

    /* Admin events/debug panel (mode-varying) */
    --panel-bg: #f3f5f7;
    --panel-bg-subtle: #f3f5f7;
    --panel-surface: #ffffff;
    --panel-control-bg: #ffffff;
    --panel-inset-bg: #f8fafb;
    --panel-inset-border: #eaeef2;
    --panel-border: #dde3e9;
    --panel-border-subtle: #e9edf1;
    --panel-text: #4b5966;
    --panel-text-muted: #6b7885;
    --panel-hover-tint: rgba(22, 32, 43, 0.03);
}

/* Dark Mode Custom Properties — deep slate, not black */
body.dark-mode {
    --bg-primary: #131c26;
    --bg-secondary: #0f161e;
    --bg-tertiary: #1b2733;
    --text-primary: #eaeef2;
    --text-secondary: #b4c0cc;
    --text-tertiary: #8a97a4;
    --border-color: #2a3742;
    --border-color-light: #202b36;

    /* Brighter primaries read better on the dark slate */
    --primary-500: #6ba3cc;
    --primary-600: #5b93bd;
    --primary-700: #4a80ac;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6), 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.4);

    /* State tints on dark slate */
    --state-danger-bg: #3a201c;
    --state-danger-text: #ec9b90;
    --state-danger-border: #5a2f28;
    --state-success-bg: #163023;
    --state-success-text: #7fcaa4;
    --state-success-border: #2c5c44;
    --state-warning-bg: #33280c;
    --state-warning-text: #f0c86a;
    --state-warning-border: #574615;
    --state-info-bg: #182b38;
    --state-info-text: #8fc0e0;
    --state-info-border: #2e4a5c;
    --state-primary-bg: #182b38;
    --state-primary-text: #8fc0e0;
    --state-primary-border: #2e4a5c;
    --state-neutral-bg: #1b2733;
    --state-neutral-text: #b4c0cc;
    --state-neutral-border: #2a3742;

    /* Mode-varying semantic roles (dark values) */
    --muted: #8a97a4;
    --disabled-bg: #1b2733;
    --disabled-text: #5c6875;
    --loading-overlay-bg: rgba(15, 22, 30, 0.95);
    --callout-warning-bg: rgba(242, 176, 30, 0.15);
    --callout-warning-text: #f0c86a;
    --form-error-bg: rgba(201, 79, 66, 0.22);
    --form-error-text: #ec9b90;
    --admin-badge-bg: var(--accent);
    --admin-badge-text: var(--accent-ink);
    --select-arrow: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%238a97a4" d="M2 0L0 2h4L2 0zM2 5L0 3h4L2 5z"/></svg>');

    /* Categorical chart palette — brighter steps validated on the dark
       surface (#131c26), not an auto-flip of the light set. */
    --chart-1: #5a8ac8;
    --chart-2: #b87f26;
    --chart-3: #4fa87a;
    --chart-4: #9e7bc8;
    --chart-5: #d9695e;
    --chart-6: #279e94;
    --chart-7: #c77e4a;
    --chart-8: #c0708f;
    --chart-grid: rgba(234, 238, 242, 0.1);
    --chart-tick: #8a97a4;

    /* Admin events/debug panel (dark values) */
    --panel-bg: #131c26;
    --panel-bg-subtle: #1b2733;
    --panel-surface: #0f161e;
    --panel-control-bg: #1b2733;
    --panel-inset-bg: #1b2733;
    --panel-inset-border: #2a3742;
    --panel-border: #2a3742;
    --panel-border-subtle: #2a3742;
    --panel-text: #b4c0cc;
    --panel-text-muted: #8a97a4;
    --panel-hover-tint: rgba(255, 255, 255, 0.05);
}