/* ============================================================================
   MetarGame — Color tokens
   A late-16-bit, dusk-lit aviation palette. Deep navy cockpit-glass surfaces,
   amber CRT accents, and the four FAA flight-category colors as the semantic core.
   ============================================================================ */
:root {
  /* ---- Flight category (the semantic heart of the product) ---- */
  --vfr:  #3ad07a;   /* green   — Visual Flight Rules */
  --mvfr: #38a3f0;   /* blue    — Marginal VFR */
  --ifr:  #ff5468;   /* red     — Instrument Flight Rules */
  --lifr: #d65cff;   /* magenta — Low IFR */

  /* ---- Brand accent ---- */
  --amber:      #ffb938;  /* CRT amber — labels, active states, pager dots */
  --amber-deep: #ff9a5c;  /* warm window-glow / golden-hour edge */

  /* ---- Text ---- */
  --ink:  #eef2f8;   /* primary text on dark scenes */
  --dim:  #aab4c8;   /* secondary / muted text */
  --ink-2: #c4cee0;  /* card metric labels */
  --ink-3: #dfe6f2;  /* header subtitles over scene */

  /* ---- Surfaces (deep navy "cockpit glass") ---- */
  --surface-0: #05070d;   /* deepest backdrop */
  --surface-1: #0a0e18;   /* page background mid */
  --surface-2: #0a1020;   /* screen base */
  --surface-3: #0b132a;   /* solid card / chip body */
  --surface-bar: #0a0f1c; /* top bars, browser chrome */

  /* ---- Glass + bevel (RPG-window card frame) ---- */
  --glass:    #0b132ac2;  /* translucent card fill (use with blur) */
  --glass-2:  #0b132a80;  /* lighter glass — chips, pills */
  --line:     #ffffff22;  /* hairline border on glass */
  --card-border: #2c3a5e; /* 2px card frame */
  --bevel-hi: #ffffff30;  /* inset top-left highlight */
  --bevel-lo: #00000055;  /* inset bottom-right shadow */

  /* ---- MODERN glass surfaces (Apple-Weather direction) ---- */
  --tile:        rgba(16,24,46,0.55);   /* data tile fill (over scene, with blur) */
  --tile-solid:  rgba(13,19,38,0.96);   /* sheets / menus (opaque) */
  --tile-line:   rgba(255,255,255,0.10);/* tile hairline border */
  --tile-inset:  #0a112099;             /* sunken metric inside tile */
  --glass-btn:   rgba(33,45,76,0.66);   /* round glass buttons (refresh/focus) */
  --glass-field: rgba(18,26,48,0.72);   /* search field / top buttons */
  --glass-chip:  rgba(18,26,48,0.55);   /* aerodrome chips */
  --line-2:      rgba(255,255,255,0.18); /* stronger hairline (buttons) */
  --hover-fill:  rgba(255,255,255,0.14); /* segmented/active fill */
  --on-cat:      #04130a;               /* near-black text on VFR/MVFR */
  --muted:       #9aa6be;               /* tile labels / sublabels */
  --muted-2:     #7e8aa3;               /* axis ticks / raw keys */

  /* ---- Scene / sky ramp (dusk → golden hour, top → horizon) ---- */
  --sky-0: #16224d;
  --sky-1: #243a73;
  --sky-2: #3f4f82;
  --sky-3: #7c5a82;
  --sky-4: #cf7a52;
  --sky-5: #ffb877;
  --ground:    #1a2440;   /* mid-ground land */
  --skyline:   #16204a;   /* building silhouettes */
  --asphalt-0: #2a3250;   /* runway top */
  --asphalt-1: #141a2c;   /* runway bottom */
  --runway-line: #cfd7e3; /* centreline / threshold paint */
  --runway-edge: #ffe9b0; /* edge lights */

  /* ---- Backdrop radial (page behind devices) ---- */
  --backdrop: radial-gradient(1100px 600px at 50% -10%, #16213a, #0a0e18 60%, #05070d); /* @kind color */
  --sky-ramp: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 34%, var(--sky-2) 55%, var(--sky-3) 72%, var(--sky-4) 86%, var(--sky-5) 100%);
  /* legibility scrim laid over the scene, behind cards */
  --scrim: linear-gradient(#05070d00 28%, #05070d22 46%, #070b18bb 72%, #070b18 100%); /* @kind color */

  /* ---- Semantic aliases ---- */
  --text-primary: var(--ink);
  --text-secondary: var(--dim);
  --text-accent: var(--amber);
  --surface-card: var(--glass);
  --surface-page: var(--surface-1);
  --border-card: var(--card-border);
  --border-hairline: var(--line);
  --warn: #ffe6a8;          /* offline / below-minima notice text */
  --warn-bg: #5a430a99;
}