/* Design tokens of the paragliding Mini App. Every colour, text size and radius in style.css reads one of these.
 * The 11 colour swatches (--bg ... --grey) came from the Claude Design system "Paragliding Sites App" card "Colour & type
 * tokens" (sync of 2026-08-28). 2026-10-09 (design review 21, rule V11): type scale, spacing, radius, status roles, tints
 * and the remaining colours added here; the claude.ai/design card does not have them yet (sync with /design-sync).
 * miniapp/tools/lint_tokens.py fails on a raw colour, text size or radius in style.css. */
:root {
  /* colour swatches (from the design card) */
  --bg: #0f1412;
  --panel: #171e1b;
  --panel2: #1f2924;
  --line: #2b3732;
  --ink: #e6ebe8;
  --muted: #93a29c;
  --accent: #f0a63c;
  --green: #3fbf6f;
  --amber: #e8b339;
  --red: #d95a4e;
  --grey: #5c6b66;
  /* more colours */
  --white: #fff;
  --on-accent: #1a1208;      /* text on the accent */
  --soar: #5fb3d9;           /* soaring */
  --orange: #e5803a;         /* wind "at limit", between amber and red */
  --ring-off: #3a4541;       /* sector ring, not flyable */
  --map-swatch: #6e7d74;     /* map-like ground behind sample markers */
  --st-low: #7a8794;
  --glass: rgba(23,30,27,.92);          /* floating controls over the map */
  --glass-strong: rgba(23,30,27,.96);
  --scrim: rgba(15,20,18,.8);           /* labels over the map */
  --scrim-strong: rgba(15,20,18,.92);
  --accent-glow: rgba(240,166,60,.45);
  --green-halo: rgba(63,191,111,.3);
  --accent-soft: rgba(240,166,60,.16);
  --green-soft: rgba(63,191,111,.18);
  --amber-soft: rgba(232,179,57,.18);
  --red-soft: rgba(217,90,78,.18);
  --soar-soft: rgba(95,179,217,.16);
  --heat-ramp: linear-gradient(90deg, #1f2924, #28332e, #2f463a, #356448, #3a8858, #3fae67, #5ee08b);
  /* status roles: what a colour MEANS (swap these, not the swatches, for another palette) */
  --st-ok: var(--green);
  --st-warn: var(--amber);
  --st-bad: var(--red);
  --st-none: var(--grey);
  /* type scale */
  --fs-xs: 11px;
  --fs-s: 12px;
  --fs-m: 13px;
  --fs-base: 14px;
  --fs-l: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  /* spacing (4 px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  /* radius */
  --r-xs: 2px;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 18px;
  --r-pill: 999px;
}