/* Design tokens — the only file where a colour is chosen (geotest's rule).
 *
 * Built from geotest's palette so the two apps on one domain feel related. Colour
 * carries meaning and is never the only carrier of it: every status pill has its text,
 * every passenger dot has the name beside it somewhere on the same screen.
 *
 *   green  on time / arrived       amber  delayed / needs attention
 *   red    cancelled / diverted    grey   past, unknown, history
 *
 * No property is defined only in the dark block.
 */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --bg-sunken: #f4f5f7;
  --bg-raised: #ffffff;
  --border: #e4e5e9;
  --border-strong: #cfd1d6;
  --text: #16181d;
  --text-muted: #61656e;
  --text-faint: #8b8f98;
  --overlay: rgb(16 18 22 / 38%);

  --accent: #4f46e5;
  --accent-strong: #4338ca;
  --accent-on: #ffffff;
  --accent-bg: #eef0fe;

  --ok: #14713d;
  --ok-bg: #e7f5ec;
  --warn: #92610a;
  --warn-bg: #fdf4e3;
  --bad: #9f1239;
  --bad-bg: #fdecef;
  --quiet: #4b5563;
  --quiet-bg: #f1f2f4;

  /* One per passenger, assigned by a stable hash (flight_tags.pax_colour). */
  --pax-1: #4f46e5;
  --pax-2: #0f766e;
  --pax-3: #b45309;
  --pax-4: #7c3aed;
  --pax-5: #0369a1;
  --pax-6: #be185d;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 16px minimum on anything typed into: smaller and iOS Safari zooms on focus. */
  --t-input: 16px;
  --t-small: 13px;
  --t-body: 16px;
  --t-title: 22px;
  --t-big: 28px;

  --tap: 44px;
  --tabbar-h: 56px;
  --shell-max: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121317;
    --bg-sunken: #0b0c0f;
    --bg-raised: #1b1d22;
    --border: #2b2e36;
    --border-strong: #3d414b;
    --text: #eceef2;
    --text-muted: #a2a7b2;
    --text-faint: #767c88;
    --overlay: rgb(0 0 0 / 60%);

    --accent: #8b85f5;
    --accent-strong: #a29bfa;
    --accent-on: #16181d;
    --accent-bg: #23233c;

    --ok: #66c98d;
    --ok-bg: #16281d;
    --warn: #e3ac52;
    --warn-bg: #2c2415;
    --bad: #f38ba3;
    --bad-bg: #2d181e;
    --quiet: #aeb4bf;
    --quiet-bg: #23262d;

    --pax-1: #8b85f5;
    --pax-2: #4bb3a8;
    --pax-3: #d99a4e;
    --pax-4: #b39cf7;
    --pax-5: #62a8db;
    --pax-6: #e78aa8;
  }
}