/* Shared by every page on trippie.app. Values from docs/DESIGN.md. Colours that change with
   the theme are variables, so pages follow the system setting without dark: variants. */
:root {
  --surface-canvas: #fbfaf6;
  --surface-raised: #ffffff;
  --border-subtle: #e7e5dc;
  --border-strong: #908e86;
  --focus-ring: #17181c;
  --ink-primary: #17181c;
  --ink-secondary: #6b6963;
  --ink-muted: #b0ac9e;
  --success: #087c41;
  --success-surface: #e7f5ec;
  --success-border: #cbead7;
  --danger: #ce221a;
  --danger-surface: #fbeae9;
  --danger-border: #f3cbc8;
  --leg-to_station: #5a6271;
  --leg-waiting: #d45ec5;
  --leg-pickup_wait: #8750c1;
  --leg-pickup_work: #92234c;
  --leg-active_trip: #0f6bdf;
  --leg-dropoff: #2c9b83;
  --leg-between_trips: #5c339d;
  --leg-return: #778cb2;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-canvas: #14171f;
    --surface-raised: #1d212e;
    --border-subtle: #2e3547;
    --border-strong: #666e83;
    --focus-ring: #ffb020;
    --ink-primary: #f5f3ed;
    --ink-secondary: #a9a69c;
    --ink-muted: #6b6963;
    --success: #3ddc84;
    --success-surface: rgba(61, 220, 132, 0.14);
    --success-border: rgba(61, 220, 132, 0.35);
    --danger: #ff6b5e;
    --danger-surface: rgba(255, 107, 94, 0.14);
    --danger-border: rgba(255, 107, 94, 0.35);
    --leg-to_station: #656c7b;
    --leg-waiting: #d85ec8;
    --leg-pickup_wait: #8853c0;
    --leg-pickup_work: #bd3f6a;
    --leg-active_trip: #1e6cd6;
    --leg-dropoff: #36a58c;
    --leg-between_trips: #a372fe;
    --leg-return: #7f96c1;
  }
}
body {
  background: var(--surface-canvas);
  color: var(--ink-primary);
}
.tnum {
  font-variant-numeric: tabular-nums;
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* On navy the light-mode ring would vanish, so it is amber there. */
.on-brand :focus-visible {
  outline-color: #ffb020;
}
.site-nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: #ffb020;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
/* Moving legs are solid; stopped legs are 45° stripes over a 35% tint. */
.leg {
  background: var(--c);
}
.leg.hatched {
  background:
    repeating-linear-gradient(45deg, var(--c) 0 3px, transparent 3px 6px),
    color-mix(in srgb, var(--c) 35%, transparent);
}
.chip input:checked + span {
  background: #ffb020;
  border-color: #ffb020;
  color: #17181c;
}
.chip input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] .chev {
  transform: rotate(180deg);
}
.chev {
  transition: transform 150ms ease;
}
.fade-in {
  animation: fade 250ms ease;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}