/* Airline Manager design tokens.
   The single source of truth for colour, spacing, type, shape, motion and
   layering. Nothing here selects an element or paints anything on its own, so
   adding this file cannot change how a page renders - it only makes the values
   nameable. Component CSS should reference these instead of literal values.

   The palette is derived from the values that were already in use, collapsed
   from ~326 near-duplicate hex literals down to the roles they actually
   expressed. When a component needs a colour, pick the role that matches its
   meaning; do not introduce a new literal. */
:root {
    /* Surfaces, darkest to lightest. -0 is the deep well behind panels, -3 is
       a hovered/selected row. */
    --am-bg: #020607;
    --am-surface-0: #040b09;
    --am-surface-1: #07110e;
    --am-surface-2: #0a1713;
    --am-surface-3: #10231d;
    --am-surface-4: #153029;
    --am-scrim: rgba(0, 3, 3, .78);
    --am-glass: rgba(4, 10, 9, .96);

    /* Borders. -subtle divides content inside a panel, the default outlines a
       panel, -control outlines an input or button, -strong outlines a modal,
       -accent marks an active/selected edge. */
    --am-border-subtle: #263a34;
    --am-border: #30473f;
    --am-border-control: #395349;
    --am-border-strong: #50665f;
    --am-border-accent: #4f9c83;

    /* Text, brightest to dimmest. -bright is reserved for page headings. */
    --am-text-bright: #eef8f4;
    --am-text-strong: #e3eeeb;
    --am-text: #d2dfdb;
    --am-text-secondary: #c8d8d3;
    --am-text-muted: #9bafa8;
    --am-text-dim: #879d95;
    --am-text-faint: #799087;

    /* Mint accent: the airline's primary colour. */
    --am-accent: #58cba6;
    --am-accent-strong: #77e1bf;
    --am-accent-dim: #46665c;
    --am-accent-bg: #102a22;
    --am-accent-bg-strong: #15352c;
    --am-accent-text: #d7f5eb;
    --am-on-accent: #03100c;

    /* Status. Warning is the amber used for the return leg and maintenance as
       well as for caution states; danger is the coral used for over-capacity. */
    --am-positive: #68d7ae;
    --am-success: var(--am-positive);
    --am-success-border: #397a64;
    --am-warning: #d7b861;
    --am-warning-strong: #e1ad3f;
    --am-warning-border: #b48236;
    --am-warning-text: #ffe0a1;
    --am-warning-bg: #2a1e08;
    --am-danger: #ff766d;
    --am-danger-strong: #e85048;
    --am-danger-border: #ba5a4e;
    --am-danger-text: #ffc1b9;
    --am-danger-bg: #26100d;

    /* Load/throughput ramp. These three are the anchor stops of a continuous
       interpolation, so they are mirrored by AirlineManager.Game.LoadRamp in
       C# (ThroughputColor). Change both together. */
    --am-ramp-good: #3ecd7a;
    --am-ramp-warn: #f0be43;
    --am-ramp-bad: #eb4b44;

    /* Categorical series for pies, stacked charts and legends. Mirrored by
       AirlineManager.Game.SeriesPalette in C#. Series 1-5 are what the demand
       pies use; 6-8 extend the stacked airport chart. */
    --am-series-1: #54c7a7;
    --am-series-2: #d7b861;
    --am-series-3: #6e9ed1;
    --am-series-4: #cb786f;
    --am-series-5: #8b78c7;
    --am-series-6: #74b86b;
    --am-series-7: #c178aa;
    --am-series-8: #5e6d69;
    --am-series-empty: #26342f;

    /* Player presence colours, in seat order. Mirrored by LobbySession. */
    --am-player-1: #55dfba;
    --am-player-2: #ffca62;
    --am-player-3: #78a9ff;
    --am-player-4: #ef82bc;

    /* Spacing, 4px base. */
    --am-space-1: 4px;
    --am-space-2: 8px;
    --am-space-3: 12px;
    --am-space-4: 16px;
    --am-space-5: 20px;
    --am-space-6: 24px;
    --am-space-7: 28px;
    --am-space-8: 32px;
    --am-gap-tight: 6px;

    /* Type. Micro type is reserved for short labels and never for explanatory
       prose. Dense operational rows use body text so the interface stays
       readable without becoming spacious. */
    --am-font-ui: "IBM Plex Sans", "Segoe UI", sans-serif;
    --am-font-mono: "IBM Plex Sans", "Segoe UI", sans-serif;
    --am-font-display: var(--am-font-ui);
    --am-fs-micro: 11px;
    --am-fs-label: 12px;
    --am-fs-small: 12px;
    --am-fs-body: 13px;
    --am-fs-value: 14px;
    --am-fs-lg: 16px;
    --am-fs-title: 19px;
    --am-fs-h2: 22px;
    --am-fs-xl: 24px;
    --am-fs-h1: 27px;
    --am-lh-tight: 1.2;
    --am-lh: 1.45;
    --am-lh-body: 1.5;
    --am-track-label: .1em;
    --am-track-eyebrow: .14em;

    /* Shape. */
    --am-radius-sm: 8px;
    --am-radius: 11px;
    --am-radius-md: var(--am-radius);
    --am-radius-lg: 14px;
    --am-radius-pill: 999px;
    --am-border-width: 1px;

    /* Elevation. -1 floats a control, -2 a panel, -3 a modal. */
    --am-shadow-1: 0 .5px 0 rgba(238, 248, 244, .08), 0 4px 12px rgba(0, 0, 0, .22);
    --am-shadow-2: 0 16px 48px rgba(0, 0, 0, .5);
    --am-shadow-3: 0 28px 80px rgba(0, 0, 0, .72);
    --am-focus-ring: 0 0 0 2px rgba(92, 210, 172, .35);
    --am-focus-outline: #77d8bb;
    --am-focus-width: 2px;
    --am-focus-offset: 2px;

    /* Motion. Overridden wholesale under prefers-reduced-motion below, which
       is why durations must be referenced as tokens and never inlined. */
    --am-dur-fast: 120ms;
    --am-dur: 160ms;
    --am-dur-slow: 280ms;
    --am-ease: cubic-bezier(.2, .6, .2, 1);
    --am-duration-fast: var(--am-dur-fast);
    --am-duration-slow: var(--am-dur-slow);
    --am-transition-control: background-color var(--am-dur-fast) var(--am-ease),
        border-color var(--am-dur-fast) var(--am-ease), color var(--am-dur-fast) var(--am-ease),
        transform var(--am-dur-fast) var(--am-ease), box-shadow var(--am-dur-fast) var(--am-ease);

    /* Layout. --am-topbar-h is consumed by every overlay that has to clear the
       header; --am-sidebar-w is written at runtime by the sidebar resizer, so
       the value here is only the default. */
    --am-topbar-h: 48px;
    --am-sidebar-w: 448px;
    --am-chat-w: 648px;
    --am-chat-h: 360px;
    --am-sidebar-min: 300px;
    --am-row-h: 48px;
    --am-control-h: 36px;
    --am-control-h-compact: 30px;
    --am-touch-target: 44px;
    --am-col-name: minmax(230px, 2.2fr);
    --am-col-metric: minmax(86px, 1fr);
    --am-cell-pad: 8px 12px;
    --am-icon-size: 18px;

    /* Compatibility aliases used by older component layers. Keeping them here
       prevents a missing custom property from invalidating an entire font or
       colour declaration. */
    --am-accent-soft: var(--am-accent-bg);
    --am-success-text: var(--am-positive);
    --am-control-bg: var(--am-surface-2);
    --am-control-hover: var(--am-surface-3);
    --am-border-active: var(--am-border-accent);

    /* Stacking order, measured from the pre-token layout. Keep every overlay
       on this ladder rather than inventing new z-index values. */
    --am-z-map: 0;
    --am-z-warning: 8;
    --am-z-card: 75;
    --am-z-sidebar: 80;
    --am-z-help: 84;
    --am-z-map-panel: 85;
    --am-z-panel: var(--am-z-map-panel);
    --am-z-map-dock: 86;
    --am-z-route-menu: 90;
    --am-z-chat: 95;
    --am-z-toast: 100;
    --am-z-modal: 120;
    /* Above the workspace, not below it. Every panel on this ladder begins
       underneath the top bar, so nothing is hidden by this - but the bar's own
       dropdowns hang down over that space and are inside its stacking context,
       so they can only clear the sidebar and overview if the bar itself does. */
    --am-z-topbar: 130;
    --am-z-game-menu: 160;
}

/* One override collapses every CSS transition and animation in the app,
   because nothing inlines a duration. JS-driven motion (MapLibre camera
   easing, the aircraft interpolation loop) is not reachable from here and is
   handled separately. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --am-dur-fast: 1ms;
        --am-dur: 1ms;
        --am-dur-slow: 1ms;
    }
}

@media (prefers-contrast: more) {
    :root {
        --am-border-subtle: #3c574e;
        --am-border: #4a6a60;
        --am-border-control: #547668;
        --am-text-muted: #b7cbc4;
        --am-text-dim: #a2b8b0;
        --am-text-faint: #93a9a1;
    }
}