/* =============================================================================
   Design tokens
   -----------------------------------------------------------------------------
   Dark is the default because the app is used in a moving vehicle, often at
   night. Every colour is defined once on :root; the light and dark blocks only
   redefine tokens, never introduce new ones.
   ========================================================================== */

:root {
  /* --- Surfaces (dark, the default) --- */
  --bg:            #0b1020;
  --surface:       #131a32;
  --surface-2:     #1b2444;
  --surface-3:     #253059;
  --surface-glass: rgba(19, 26, 50, 0.82);
  --scrim:         rgba(5, 8, 18, 0.55);

  /* --- Text --- */
  --text:       #eaf0ff;
  --text-dim:   #9fadd2;
  --text-faint: #6d7ca2;

  /* --- Lines --- */
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* --- Brand + state --- */
  --accent:       #5ea2ff;
  --accent-soft:  rgba(94, 162, 255, 0.16);
  --accent-text:  #0a1226;

  --ok:      #34d399;
  --ok-soft: rgba(52, 211, 153, 0.16);

  --warn:      #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.16);

  --bad:      #fb7185;
  --bad-soft: rgba(251, 113, 133, 0.16);

  /* --- Speed ramp: used for trail segments and speed badges --- */
  --speed-0: #4f8cff;   /* stopped / crawling */
  --speed-1: #2dd4bf;
  --speed-2: #a3e635;
  --speed-3: #fbbf24;
  --speed-4: #fb7185;   /* fast */

  /* --- Chart series: 8 hues that stay distinguishable on both themes --- */
  --series-1: #5ea2ff;
  --series-2: #2dd4bf;
  --series-3: #fbbf24;
  --series-4: #f472b6;
  --series-5: #a78bfa;
  --series-6: #a3e635;
  --series-7: #fb923c;
  --series-8: #38bdf8;

  /* --- Type --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;    /* 12 — labels, units */
  --fs-sm: 0.8125rem;  /* 13 — secondary */
  --fs-md: 0.9375rem;  /* 15 — body */
  --fs-lg: 1.0625rem;  /* 17 — titles */
  --fs-xl: 1.375rem;   /* 22 — hero values */
  --fs-2xl: 1.875rem;  /* 30 — speed readout */

  /* --- Space --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* --- Radii --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* --- Elevation --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.50);

  /* --- Motion --- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 380ms;

  /* --- Touch --- */
  --tap: 44px;         /* iOS minimum */
  --tap-lg: 56px;      /* dock buttons */

  /* --- Safe areas (0 on non-notched devices) --- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* --- Layout metrics, kept in sync by JS where they must be --- */
  --topbar-h: 52px;
  --dock-h: 64px;

  /* --- Stacking. Leaflet panes live at 200-700; stay above them. --- */
  --z-map-ui: 800;
  --z-topbar: 900;
  --z-dock: 1000;
  --z-sheet: 1100;
  --z-toast: 1300;
  --z-modal: 1400;

  color-scheme: dark;
}

/* Explicit light choice, and system-light when no explicit choice was made. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:            #eef1f8;
    --surface:       #ffffff;
    --surface-2:     #f4f6fc;
    --surface-3:     #e6ebf7;
    --surface-glass: rgba(255, 255, 255, 0.88);
    --scrim:         rgba(15, 23, 42, 0.30);

    --text:       #101528;
    --text-dim:   #4c5878;
    --text-faint: #78849f;

    --border:        rgba(16, 21, 40, 0.12);
    --border-strong: rgba(16, 21, 40, 0.22);

    --accent:      #1d6fe0;
    --accent-soft: rgba(29, 111, 224, 0.12);
    --accent-text: #ffffff;

    --ok:      #0f9d63;
    --ok-soft: rgba(15, 157, 99, 0.14);

    --warn:      #b7791f;
    --warn-soft: rgba(183, 121, 31, 0.14);

    --bad:      #d92d51;
    --bad-soft: rgba(217, 45, 81, 0.14);

    --speed-0: #1d6fe0;
    --speed-1: #0d9488;
    --speed-2: #4d7c0f;
    --speed-3: #b45309;
    --speed-4: #be123c;

    --series-1: #1d6fe0;
    --series-2: #0d9488;
    --series-3: #b45309;
    --series-4: #be185d;
    --series-5: #6d28d9;
    --series-6: #4d7c0f;
    --series-7: #c2410c;
    --series-8: #0369a1;

    --shadow-1: 0 1px 2px rgba(16, 21, 40, 0.10);
    --shadow-2: 0 4px 16px rgba(16, 21, 40, 0.12);
    --shadow-3: 0 12px 40px rgba(16, 21, 40, 0.18);

    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg:            #eef1f8;
  --surface:       #ffffff;
  --surface-2:     #f4f6fc;
  --surface-3:     #e6ebf7;
  --surface-glass: rgba(255, 255, 255, 0.88);
  --scrim:         rgba(15, 23, 42, 0.30);

  --text:       #101528;
  --text-dim:   #4c5878;
  --text-faint: #78849f;

  --border:        rgba(16, 21, 40, 0.12);
  --border-strong: rgba(16, 21, 40, 0.22);

  --accent:      #1d6fe0;
  --accent-soft: rgba(29, 111, 224, 0.12);
  --accent-text: #ffffff;

  --ok:      #0f9d63;
  --ok-soft: rgba(15, 157, 99, 0.14);

  --warn:      #b7791f;
  --warn-soft: rgba(183, 121, 31, 0.14);

  --bad:      #d92d51;
  --bad-soft: rgba(217, 45, 81, 0.14);

  --speed-0: #1d6fe0;
  --speed-1: #0d9488;
  --speed-2: #4d7c0f;
  --speed-3: #b45309;
  --speed-4: #be123c;

  --series-1: #1d6fe0;
  --series-2: #0d9488;
  --series-3: #b45309;
  --series-4: #be185d;
  --series-5: #6d28d9;
  --series-6: #4d7c0f;
  --series-7: #c2410c;
  --series-8: #0369a1;

  --shadow-1: 0 1px 2px rgba(16, 21, 40, 0.10);
  --shadow-2: 0 4px 16px rgba(16, 21, 40, 0.12);
  --shadow-3: 0 12px 40px rgba(16, 21, 40, 0.18);

  color-scheme: light;
}