/* JerryJerry design tokens (ROU-38). Source of truth for every color, size and
 * timing in the /jj/ app. Components use var(--jj-*) only, never hex values.
 *
 * Theme: <html data-theme="dark|light"> is set by theme.js before first paint.
 * Without data-theme (no JS), the media query below follows the OS.
 * Map colors in map-dark.json / map-light.json come from the same palette
 * (tools/build-map-styles.mjs); keep the --jj-route* values in sync with it.
 */

/* ---------- Theme-independent tokens ---------- */
:root {
  /* Type. System stack: no font download, native rendering on every phone. */
  --jj-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jj-font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jj-num: tabular-nums;            /* font-variant-numeric for ETA, distance, speed */

  /* size / line-height / weight */
  --jj-fs-caption: 12px;  --jj-lh-caption: 16px;   /* units, "then", legal */
  --jj-fs-label: 13px;    --jj-lh-label: 18px;     /* chips, stat labels */
  --jj-fs-body: 15px;     --jj-lh-body: 22px;      /* list rows, inputs */
  --jj-fs-body-lg: 17px;  --jj-lh-body-lg: 24px;   /* search field, CTA */
  --jj-fs-title: 20px;    --jj-lh-title: 26px;     /* street name, sheet titles */
  --jj-fs-headline: 28px; --jj-lh-headline: 32px;  /* summary duration, stat values */
  --jj-fs-display: 40px;  --jj-lh-display: 44px;   /* next-turn distance */
  --jj-fw-regular: 450;
  --jj-fw-medium: 560;
  --jj-fw-bold: 700;
  --jj-fw-heavy: 800;
  --jj-tracking-tight: -0.02em;      /* headline and display only */
  --jj-tracking-caps: 0.06em;        /* uppercase stat labels */

  /* Spacing: 4 px grid. */
  --jj-space-0: 2px;
  --jj-space-1: 4px;
  --jj-space-2: 8px;
  --jj-space-3: 12px;
  --jj-space-4: 16px;
  --jj-space-5: 20px;
  --jj-space-6: 24px;
  --jj-space-7: 32px;
  --jj-space-8: 40px;
  --jj-space-9: 48px;

  /* Touch targets: never below 44 px; 48 px is the default. */
  --jj-hit-min: 44px;
  --jj-hit: 48px;
  --jj-hit-lg: 56px;                 /* primary CTA, map FABs while driving */

  /* Radii */
  --jj-radius-xs: 6px;
  --jj-radius-sm: 10px;
  --jj-radius-md: 14px;
  --jj-radius-lg: 20px;
  --jj-radius-sheet: 28px;           /* top corners of the bottom sheet */
  --jj-radius-pill: 999px;

  /* Glass */
  --jj-blur: 24px;
  --jj-saturate: 170%;
  --jj-backdrop: blur(var(--jj-blur)) saturate(var(--jj-saturate));

  /* Motion. Short, decelerating, never bouncy while driving. */
  --jj-dur-instant: 80ms;            /* press feedback */
  --jj-dur-fast: 140ms;              /* chip toggle, hover, icon swap */
  --jj-dur-base: 220ms;              /* toasts, banner content change */
  --jj-dur-slow: 360ms;              /* sheet detent, panel slide */
  --jj-dur-camera: 900ms;            /* map flyTo / recenter (JS, see SPEC) */
  --jj-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --jj-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);    /* entering */
  --jj-ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);    /* leaving */
  --jj-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* planning only: drag drop, chip on */

  /* Z layers */
  --jj-z-map: 0;
  --jj-z-map-ui: 10;                 /* attribution, scale */
  --jj-z-fab: 20;                    /* recenter, mute, overview */
  --jj-z-sheet: 30;                  /* planning sheet, nav bottom bar */
  --jj-z-banner: 40;                 /* maneuver banner, search pill */
  --jj-z-toast: 50;
  --jj-z-scrim: 60;
  --jj-z-dialog: 70;                 /* settings, arrival */
  --jj-z-drag: 80;                   /* row being dragged */

  /* Safe areas (viewport-fit=cover) */
  --jj-safe-top: env(safe-area-inset-top, 0px);
  --jj-safe-right: env(safe-area-inset-right, 0px);
  --jj-safe-bottom: env(safe-area-inset-bottom, 0px);
  --jj-safe-left: env(safe-area-inset-left, 0px);
  --jj-edge: var(--jj-space-3);      /* gap between floating UI and screen edge */

  /* Layout */
  --jj-panel-w: 400px;               /* landscape / desktop side panel */
  --jj-sheet-peek: 148px;            /* collapsed sheet height above safe area */

  /* Road signs (ROU-58). Real-world sign colours (RAL 3020 / 5017 / 1023 / 6024),
   * the same in both themes, always with the white edge German signs have. */
  --jj-font-sign: "DIN 1451 Mittelschrift", "D-DIN", "Bahnschrift", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --jj-sign-red: #C8102E;            /* speed-limit ring */
  --jj-sign-white: #FFFFFF;
  --jj-sign-black: #111111;          /* numbers on white: 18.9:1 */
  --jj-sign-blue: #0B4DA2;           /* Autobahn signpost / A-shield; white 8.1:1 */
  --jj-sign-yellow: #F6C700;         /* Bundesstrasse signpost / B-shield; black 11.8:1 */
  --jj-sign-green: #00804A;          /* E-road shield; white 5.0:1 */
}

/* ---------- Dark (default) ---------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --jj-bg: #0A0D12;                  /* page behind the map, splash */
  --jj-surface: #12161D;             /* solid sheets, dialogs */
  --jj-surface-2: #1A2029;           /* inputs, cards, list rows */
  --jj-surface-3: #242B36;           /* pressed / selected rows */
  --jj-surface-glass: rgba(16, 20, 27, 0.72);        /* floating over the map */
  --jj-surface-glass-strong: rgba(16, 20, 27, 0.88); /* banner, bottom bar while driving */
  --jj-glass-edge: rgba(255, 255, 255, 0.08);        /* 1 px inner border on glass */
  --jj-glass-highlight: rgba(255, 255, 255, 0.06);   /* top-edge sheen gradient stop */
  --jj-scrim: rgba(4, 6, 9, 0.56);

  --jj-text: #F3F5F8;                /* 16.6:1 on surface */
  --jj-text-2: #A9B2C1;              /* 8.5:1  secondary text */
  --jj-text-3: #8590A0;              /* 5.6:1 on surface, 5.1:1 on surface-2: hints, units. Not on surface-3. */
  --jj-text-on-accent: #FFFFFF;
  --jj-border: rgba(255, 255, 255, 0.10);
  --jj-divider: rgba(255, 255, 255, 0.06);

  --jj-accent: #5B96FF;              /* text, icons, focus: 6.3:1 on surface */
  --jj-accent-strong: #2F6BF0;       /* filled buttons; white text 4.7:1 */
  --jj-accent-press: #2559CC;
  --jj-accent-soft: rgba(91, 150, 255, 0.16);        /* selected chip, row hover */
  --jj-focus: #7FB0FF;

  --jj-banner: #1F5FE0;              /* maneuver banner; white 5.6:1 */
  --jj-banner-2: #174CB8;            /* "then" strip under the banner */
  --jj-banner-text: #FFFFFF;
  --jj-banner-text-2: #E3EBFF;

  --jj-success: #3DDC97;
  --jj-success-strong: #0A8754;      /* arrival badge; white 4.6:1 */
  --jj-success-soft: rgba(61, 220, 151, 0.16);
  --jj-warning: #FFC247;
  --jj-danger: #FF6B6B;
  --jj-danger-strong: #D12F2F;       /* "End" button */

  /* Map overlays (same values as map-dark.json) */
  --jj-route: #3D8BFF;
  --jj-route-casing: #0A2A5E;
  --jj-route-alt: #5A6678;
  --jj-route-passed: #4A5260;
  --jj-stop-start: #3DDC97;
  --jj-stop-via: #F3F5F8;
  --jj-stop-end: #FF4D6D;
  --jj-puck: #3D8BFF;
  --jj-puck-ring: #FFFFFF;

  /* Live (ROU-58). Traffic on the route line (same values as map-dark.json),
   * incident badges, the cheapest-fuel pin. */
  --jj-traffic-slow: #FFA42B;        /* 25-50 % below free flow */
  --jj-traffic-heavy: #FF4F4F;       /* 50-75 % below */
  --jj-traffic-stopped: #B0102C;     /* > 75 % below, or closed */
  --jj-hazard: #FFB224;              /* roadworks, jam, accident, object badges */
  --jj-hazard-ink: #241800;          /* pictogram on hazard: 9.7:1 */
  --jj-hazard-soft: rgba(255, 178, 36, 0.16);
  --jj-severe: #D12F2F;              /* closure, wrong-way badges + banner; white 5.0:1 */
  --jj-severe-ink: #FFFFFF;
  --jj-charge: #0A8754;              /* charging-stop badge; white 4.6:1 */
  --jj-charge-bar: #3DDC97;          /* "charge from -> to" fill */
  --jj-cheap: #0A8754;               /* cheapest fuel pin; white 4.6:1 */
  --jj-pin: #1A2029;                 /* neutral map pin (fuel, camera) */
  --jj-pin-ink: #F3F5F8;
  --jj-pin-ring: rgba(255, 255, 255, 0.92);
  --jj-overspeed: #D12F2F;           /* speed bubble when over the limit; white 5.0:1 */

  /* Brand (ROU-63): the mark's white J, its light trail, the echo "jerry". */
  --jj-brand-ink: #FFFFFF;
  --jj-brand-trail-a: #2F6BF0;       /* = accent-strong */
  --jj-brand-trail-b: #7FB0FF;       /* = focus */
  --jj-brand-echo: #5B96FF;          /* = accent */
  --jj-brand-glow: rgba(47, 107, 240, 0.28);

  --jj-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.28);
  --jj-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.42), 0 12px 32px rgba(0, 0, 0, 0.36);
  --jj-shadow-3: 0 12px 28px rgba(0, 0, 0, 0.50), 0 24px 64px rgba(0, 0, 0, 0.44);
}

/* ---------- Light ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --jj-bg: #EEF1F5;
  --jj-surface: #FFFFFF;
  --jj-surface-2: #F2F4F7;
  --jj-surface-3: #E6EAF0;
  --jj-surface-glass: rgba(255, 255, 255, 0.76);
  --jj-surface-glass-strong: rgba(255, 255, 255, 0.92);
  --jj-glass-edge: rgba(14, 20, 32, 0.08);
  --jj-glass-highlight: rgba(255, 255, 255, 0.70);
  --jj-scrim: rgba(14, 20, 32, 0.36);

  --jj-text: #0E1420;                /* 18.4:1 on white */
  --jj-text-2: #4B5565;              /* 7.5:1 */
  --jj-text-3: #5F6878;              /* 5.6:1 on white, 5.1:1 on surface-2 */
  --jj-text-on-accent: #FFFFFF;
  --jj-border: rgba(14, 20, 32, 0.12);
  --jj-divider: rgba(14, 20, 32, 0.07);

  --jj-accent: #1F5FE0;              /* 5.6:1 on white */
  --jj-accent-strong: #1F5FE0;
  --jj-accent-press: #184CB5;
  --jj-accent-soft: rgba(31, 95, 224, 0.10);
  --jj-focus: #1F5FE0;

  --jj-banner: #1F5FE0;
  --jj-banner-2: #184CB5;
  --jj-banner-text: #FFFFFF;
  --jj-banner-text-2: #E3EBFF;

  --jj-success: #0A8754;
  --jj-success-strong: #0A8754;
  --jj-success-soft: rgba(10, 135, 84, 0.12);
  --jj-warning: #A15C00;
  --jj-danger: #D12F2F;
  --jj-danger-strong: #D12F2F;

  --jj-route: #2F6FED;
  --jj-route-casing: #1846A8;
  --jj-route-alt: #7A889C;
  --jj-route-passed: #A3ACB9;
  --jj-stop-start: #0A8754;
  --jj-stop-via: #0E1420;
  --jj-stop-end: #E0244A;
  --jj-puck: #2F6FED;
  --jj-puck-ring: #FFFFFF;

  --jj-traffic-slow: #D06600;
  --jj-traffic-heavy: #E03131;
  --jj-traffic-stopped: #8F0A24;
  --jj-hazard: #FFB224;
  --jj-hazard-ink: #241800;
  --jj-hazard-soft: rgba(240, 140, 0, 0.12);
  --jj-severe: #D12F2F;
  --jj-severe-ink: #FFFFFF;
  --jj-charge: #0A8754;
  --jj-charge-bar: #12A86A;
  --jj-cheap: #0A8754;
  --jj-pin: #FFFFFF;
  --jj-pin-ink: #0E1420;
  --jj-pin-ring: rgba(14, 20, 32, 0.14);
  --jj-overspeed: #D12F2F;

  --jj-brand-ink: #0E1420;           /* = text */
  --jj-brand-trail-a: #1F5FE0;       /* = accent */
  --jj-brand-trail-b: #5B96FF;
  --jj-brand-echo: #1F5FE0;
  --jj-brand-glow: rgba(31, 95, 224, 0.14);

  --jj-shadow-1: 0 1px 2px rgba(14, 20, 32, 0.08), 0 2px 8px rgba(14, 20, 32, 0.08);
  --jj-shadow-2: 0 4px 12px rgba(14, 20, 32, 0.10), 0 12px 32px rgba(14, 20, 32, 0.12);
  --jj-shadow-3: 0 12px 28px rgba(14, 20, 32, 0.14), 0 24px 64px rgba(14, 20, 32, 0.18);
}

/* No-JS fallback: follow the OS when theme.js has not set data-theme. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --jj-bg: #EEF1F5; --jj-surface: #FFFFFF; --jj-surface-2: #F2F4F7; --jj-surface-3: #E6EAF0;
    --jj-surface-glass: rgba(255, 255, 255, 0.76); --jj-surface-glass-strong: rgba(255, 255, 255, 0.92);
    --jj-glass-edge: rgba(14, 20, 32, 0.08); --jj-glass-highlight: rgba(255, 255, 255, 0.70); --jj-scrim: rgba(14, 20, 32, 0.36);
    --jj-text: #0E1420; --jj-text-2: #4B5565; --jj-text-3: #5F6878;
    --jj-border: rgba(14, 20, 32, 0.12); --jj-divider: rgba(14, 20, 32, 0.07);
    --jj-accent: #1F5FE0; --jj-accent-strong: #1F5FE0; --jj-accent-press: #184CB5; --jj-accent-soft: rgba(31, 95, 224, 0.10); --jj-focus: #1F5FE0;
    --jj-success: #0A8754; --jj-success-soft: rgba(10, 135, 84, 0.12); --jj-warning: #A15C00; --jj-danger: #D12F2F;
    --jj-route: #2F6FED; --jj-route-casing: #1846A8; --jj-route-alt: #7A889C; --jj-route-passed: #A3ACB9;
    --jj-stop-start: #0A8754; --jj-stop-via: #0E1420; --jj-stop-end: #E0244A; --jj-puck: #2F6FED;
    --jj-traffic-slow: #D06600; --jj-traffic-heavy: #E03131; --jj-traffic-stopped: #8F0A24; --jj-hazard-soft: rgba(240, 140, 0, 0.12);
    --jj-charge-bar: #12A86A; --jj-pin: #FFFFFF; --jj-pin-ink: #0E1420; --jj-pin-ring: rgba(14, 20, 32, 0.14);
    --jj-brand-ink: #0E1420; --jj-brand-trail-a: #1F5FE0; --jj-brand-trail-b: #5B96FF; --jj-brand-echo: #1F5FE0; --jj-brand-glow: rgba(31, 95, 224, 0.14);
    --jj-shadow-1: 0 1px 2px rgba(14, 20, 32, 0.08), 0 2px 8px rgba(14, 20, 32, 0.08);
    --jj-shadow-2: 0 4px 12px rgba(14, 20, 32, 0.10), 0 12px 32px rgba(14, 20, 32, 0.12);
    --jj-shadow-3: 0 12px 28px rgba(14, 20, 32, 0.14), 0 24px 64px rgba(14, 20, 32, 0.18);
  }
}

/* ---------- Accessibility modes ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --jj-dur-instant: 0ms;
    --jj-dur-fast: 0ms;
    --jj-dur-base: 120ms;            /* opacity fades only; no movement */
    --jj-dur-slow: 120ms;
    --jj-dur-camera: 0ms;            /* map.jumpTo instead of flyTo */
    --jj-ease-spring: var(--jj-ease-standard);
  }
}

@media (prefers-contrast: more) {
  :root {
    --jj-surface-glass: var(--jj-surface);
    --jj-surface-glass-strong: var(--jj-surface);
    --jj-glass-edge: var(--jj-text-3);
    --jj-text-3: var(--jj-text-2);
  }
}

/* Glass without backdrop-filter support (old Firefox ESR, some WebViews): go solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --jj-surface-glass: var(--jj-surface);
    --jj-surface-glass-strong: var(--jj-surface);
  }
}

/* ---------- Base primitives (opt-in classes; tiny on purpose) ---------- */
.jj-glass {
  background: linear-gradient(180deg, var(--jj-glass-highlight), transparent 40%), var(--jj-surface-glass);
  -webkit-backdrop-filter: var(--jj-backdrop);
  backdrop-filter: var(--jj-backdrop);
  box-shadow: inset 0 0 0 1px var(--jj-glass-edge), var(--jj-shadow-2);
}
.jj-glass-strong {
  background: var(--jj-surface-glass-strong);
  -webkit-backdrop-filter: var(--jj-backdrop);
  backdrop-filter: var(--jj-backdrop);
  box-shadow: inset 0 0 0 1px var(--jj-glass-edge), var(--jj-shadow-2);
}
.jj-num { font-variant-numeric: var(--jj-num); }
.jj-icon { width: 24px; height: 24px; flex: none; }

:focus-visible {
  outline: 2px solid var(--jj-focus);
  outline-offset: 2px;
}