/* Need A Ride — shared design tokens (public site, portals, admin) */
:root {
  /* Brand */
  --red: #E5332A;
  --red-deep: #B81F18;
  --red-glow: rgba(229, 51, 42, .45);
  --black: #000;
  --ink: #15161C;
  --ink-2: #3A3D49;
  --muted: #6B6F7E;
  --line: #E3E5EC;
  --paper: #F2F3F7;
  --white: #fff;

  /* Category paints — colour always means vehicle category */
  --amber: #FFB21E;
  --teal: #10C3B0;
  --violet: #7B5CFF;
  --blue: #2F8CFF;
  --green: #4CC24A;
  --pink: #F2499B;

  /* Status tones */
  --ok: #19A35B;
  --ok-bg: #E3F7EC;
  --warn: #C77800;
  --warn-bg: #FFF3DC;
  --bad: #D3261E;
  --bad-bg: #FDE8E7;
  --info: #1F6FE0;
  --info-bg: #E5EFFF;

  /* Type */
  --display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape */
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --pill: 999px;

  /* Depth */
  --sh-1: 0 1px 2px rgba(21, 22, 28, .06), 0 2px 8px rgba(21, 22, 28, .05);
  --sh-2: 0 6px 24px -6px rgba(21, 22, 28, .16), 0 2px 6px rgba(21, 22, 28, .06);
  --sh-3: 0 24px 60px -18px rgba(21, 22, 28, .35);
  --sh-red: 0 10px 28px -8px var(--red-glow);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .6s;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t: 0s; --t-slow: 0s; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}

/* Smooth cross-page transitions (Chrome/Edge/Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(18px); } }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease); }

.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.18em; }
.ico.fill { fill: currentColor; stroke: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }