/*
 * Klarspur design tokens — single source of truth for the driver app (phone + Tesla).
 * Palette is LOCKED (DECISIONS D12 / D15.3). Derived values only extend it.
 * Guide: docs/DESIGN.md · living page: /styleguide (APP_ENV=DEV only).
 */
:root {
  /* ---- Brand palette (D12, do not change) ---- */
  --ks-bg: #0B0F14;
  --ks-surface: #151B24;
  --ks-text: #E8EEF7;
  --ks-muted: #9AA8BC;
  --ks-accent: #3ECF8E;
  --ks-danger: #FF5C5C;
  --ks-warning: #FFB020;
  --ks-community: #FF8A3D;

  /* ---- Derived neutrals (elevation by lightness, not by shadow alone) ---- */
  --ks-surface-2: #1C2430;      /* raised: inputs on sheets, hover rows */
  --ks-surface-3: #253041;      /* pressed / selected rows */
  --ks-border: #2A3444;
  --ks-border-strong: #3A475A;
  --ks-placeholder: #7C8AA0;    /* input placeholder, ≥4.5:1 on bg */
  --ks-scrim: rgba(4, 7, 10, 0.62);
  /* Floating chrome over the full-bleed map (0.2.5): dark glass stays legible on light and dark map styles */
  --ks-surface-glass: rgba(21, 27, 36, 0.9);        /* surface @ 90% */
  --ks-surface-glass-strong: rgba(21, 27, 36, 0.96); /* panels with inputs / the maneuver card */
  --ks-glass-blur: 14px;
  --ks-map-night: #45516E;       /* OpenFreeMap Fiord canvas, dark appearance only */

  /* ---- Semantic roles ---- */
  --ks-on-accent: #04110A;
  --ks-accent-hover: #5BDBA2;
  --ks-accent-pressed: #2FB77A;
  --ks-accent-soft: rgba(62, 207, 142, 0.14);
  --ks-success: var(--ks-accent);
  --ks-danger-soft: rgba(255, 92, 92, 0.14);
  --ks-warning-soft: rgba(255, 176, 32, 0.14);
  --ks-community-soft: rgba(255, 138, 61, 0.16);
  --ks-traffic: #5B9FFF;        /* provider traffic ONLY (legend honesty D4.5) */
  --ks-focus-ring: 0 0 0 3px var(--ks-bg), 0 0 0 5px var(--ks-accent);

  /* ---- Typography ---- */
  --ks-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ks-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ks-text-xs: 0.75rem;        /* 12 — legal, attribution */
  --ks-text-sm: 0.875rem;       /* 14 — meta, labels */
  --ks-text-md: 1rem;           /* 16 — body, inputs (no iOS zoom) */
  --ks-text-lg: 1.125rem;       /* 18 — buttons on Tesla, sheet body */
  --ks-text-xl: 1.375rem;       /* 22 — sheet titles, ETA */
  --ks-text-2xl: 1.75rem;       /* 28 — route summary figure */
  --ks-text-display: clamp(2rem, 8vw, 3rem); /* next-turn */
  --ks-leading-tight: 1.15;
  --ks-leading: 1.45;
  --ks-weight-regular: 400;
  --ks-weight-medium: 500;
  --ks-weight-bold: 700;

  /* ---- Spacing (8px grid, 4px half-step) ---- */
  --ks-space-1: 4px;
  --ks-space-2: 8px;
  --ks-space-3: 12px;
  --ks-space-4: 16px;
  --ks-space-5: 24px;
  --ks-space-6: 32px;
  --ks-space-7: 48px;
  --ks-space: var(--ks-space-2); /* legacy alias */

  /* ---- Radius ---- */
  --ks-radius-sm: 8px;
  --ks-radius-card: 12px;
  --ks-radius-sheet: 20px;
  --ks-radius-pill: 999px;

  /* ---- Elevation ---- */
  --ks-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --ks-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ks-shadow-3: 0 -12px 40px rgba(0, 0, 0, 0.55);

  /* ---- Motion (driving: ≤150ms; reduced-motion: none) ---- */
  --ks-dur-fast: 120ms;
  --ks-dur-base: 200ms;
  --ks-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Z layers ---- */
  --ks-z-map: 0;
  --ks-z-map-overlay: 10;       /* legend, pins, FAB */
  --ks-z-chrome: 20;            /* top strip, dock */
  --ks-z-dropdown: 30;          /* autocomplete */
  --ks-z-backdrop: 40;
  --ks-z-sheet: 50;
  --ks-z-toast: 60;

  /* ---- Density: phone (default, mobile first) ---- */
  --ks-tap: 44px;               /* any control */
  --ks-tap-primary: 52px;       /* primary CTA */
  --ks-tap-confirm: 56px;       /* report confirm / Still there / All clear (D7.18) */
  --ks-safe-extra: 12px;        /* added to env(safe-area-inset-*) */
  --ks-dock-width: 400px;       /* landscape left dock */
  --ks-float-gap: 8px;          /* distance of floating chrome from the screen edge (plus safe area) */
  --ks-maneuver-icon: 4.5rem;   /* maneuver arrow tile */
}

/* ---- Density: Tesla in-car browser (D7: env + 24px, confirm 64+) ---- */
[data-surface="tesla"] {
  --ks-text-sm: 1rem;
  --ks-text-md: 1.125rem;
  --ks-text-lg: 1.25rem;
  --ks-text-xl: 1.5rem;
  --ks-text-2xl: 2rem;
  --ks-text-display: clamp(2.5rem, 4.6vw, 3.75rem);
  --ks-tap: 3.75rem;            /* 60px at 16px root; rem so it scales with the root below */
  --ks-tap-primary: 4.25rem;    /* 68 */
  --ks-tap-confirm: 4.5rem;     /* 72 */
  --ks-safe-extra: 24px;
  --ks-dock-width: 27.5rem;     /* 440 */
  --ks-float-gap: 16px;
  --ks-maneuver-icon: 5.5rem;
}
/* Tesla root scales with viewport: ~16px at 1180 wide (MCU browser), ~20px at 1920 (full screen). */
html[data-surface="tesla"] { font-size: clamp(16px, calc(0.55vw + 9.5px), 21px); }