/* gruber design tokens — single source of visual truth.
   v2: follows the device (gruber#2). Light is the base palette; dark
   overrides under prefers-color-scheme. Screens use ONLY these tokens for
   color — hardcoded rgba/hex in a screen file is a defect. */
:root {
  /* palette — LIGHT */
  --bg: #F4F4F6;
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: #EEEEF1;
  --bg-elev-3: #E4E4E9;
  --line: rgba(10, 10, 14, 0.08);
  --line-strong: rgba(10, 10, 14, 0.16);

  --text: #141419;
  --text-2: rgba(20, 20, 25, 0.62);
  --text-3: rgba(20, 20, 25, 0.40);
  --text-invert: #FFFFFF;
  --on-accent: #141419;         /* readable on amber in both themes */

  --accent: #E8A500;            /* taxi amber, deepened for light-bg contrast */
  --accent-strong: #C78E00;
  --accent-dim: rgba(232, 165, 0, 0.16);
  --good: #1E9E5F;
  --good-dim: rgba(30, 158, 95, 0.14);
  --bad: #D93F3F;
  --bad-dim: rgba(217, 63, 63, 0.10);
  --info: #3D6FD9;

  --glass: rgba(255, 255, 255, 0.86);   /* floating chrome over the map */
  --shadow-1: 0 1px 2px rgba(20,20,25,.10), 0 2px 8px rgba(20,20,25,.08);
  --shadow-2: 0 2px 4px rgba(20,20,25,.12), 0 8px 24px rgba(20,20,25,.12);
  --shadow-3: 0 4px 8px rgba(20,20,25,.14), 0 16px 48px rgba(20,20,25,.16);
  --shadow-sheet: 0 -8px 40px rgba(20,20,25,.18);

  /* type */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-hero: 2.5rem;
  --fw-med: 510;
  --fw-semi: 590;
  --fw-bold: 700;

  /* spacing: 4pt grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-full: 999px;

  /* motion */
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 160ms;
  --t-med: 240ms;
  --t-slow: 360ms;

  /* layout */
  --tabbar-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* palette — DARK (the original night-cab look) */
    --bg: #0A0A0E;
    --bg-elev-1: #131318;
    --bg-elev-2: #1B1B22;
    --bg-elev-3: #24242D;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);

    --text: #F5F5F7;
    --text-2: rgba(245, 245, 247, 0.64);
    --text-3: rgba(245, 245, 247, 0.40);
    --text-invert: #0A0A0E;
    --on-accent: #0A0A0E;

    --accent: #F6B100;
    --accent-strong: #FFC42E;
    --accent-dim: rgba(246, 177, 0, 0.14);
    --good: #34C77B;
    --good-dim: rgba(52, 199, 123, 0.14);
    --bad: #FF5D5D;
    --bad-dim: rgba(255, 93, 93, 0.12);
    --info: #5B8DEF;

    --glass: rgba(19, 19, 24, 0.86);
    --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
    --shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
    --shadow-3: 0 4px 8px rgba(0,0,0,.55), 0 16px 48px rgba(0,0,0,.55);
    --shadow-sheet: 0 -8px 40px rgba(0,0,0,.6);
  }
}