/* Auto Kent Finance theme tokens — layered over the Modernist sheet. Soft radii, black/white palette with the logo red as the action colour. */
html { scrollbar-gutter: stable; }
:root, [data-theme] {
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-pill: 999px;
  --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --as-red: #e5484d; --as-green: #30a46c;
  --as-red-badge: #d01414; /* logo red — white badge text passes contrast (5.5:1) */
  --as-brand: #e5262b; /* logo red, used for dots and icons only (non-text: ≥3:1 on white and on dark) */
  --as-brand-btn: #d01414; /* logo red (sampled from the Auto Kent Finance logo): white button text passes WCAG AA (5.5:1) */
}
:root, [data-theme="light"] {
  --color-bg: #f4f4f2; --color-surface: #ffffff; --as-surface-2: #ebebe8;
  --color-text: #1b1c1f; --as-muted: #5f6066;
  --color-divider: rgba(27, 28, 31, .10); --as-line-strong: rgba(27, 28, 31, .18);
  /* Brand red (logo #d01414): buttons, selected filters, checkboxes, active page — the "action" colour. */
  --as-ink: var(--as-brand-btn); --as-on-ink: #ffffff; --as-logo-plate: #1b1c1f;
  --color-accent: #d01414; --color-accent-100: #fbe8e8; --color-accent-800: #8f0e0e;
  --as-stripe: rgba(27, 28, 31, .06);
  --shadow-sm: 0 1px 2px rgba(20, 20, 24, .06);
  --shadow-md: 0 8px 24px rgba(20, 20, 24, .08);
  --shadow-lg: 0 24px 60px rgba(20, 20, 24, .16);
}
[data-theme="dark"] {
  --color-bg: #16171a; --color-surface: #1f2024; --as-surface-2: #292a2f;
  --color-text: #f2f2f0; --as-muted: #a3a4aa;
  --color-divider: rgba(242, 242, 240, .09); --as-line-strong: rgba(242, 242, 240, .18);
  /* Same brand red as day mode for buttons / selected items, so both themes match. */
  --as-ink: var(--as-brand-btn); --as-on-ink: #ffffff; --as-logo-plate: transparent;
  --color-accent: var(--as-brand-btn); --color-accent-100: #2b1b1c; --color-accent-800: #ff8a85;
  --as-stripe: rgba(242, 242, 240, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 0 0 1px rgba(242, 242, 240, .06), 0 30px 70px rgba(0, 0, 0, .55);
}

html, body { margin: 0; background: var(--color-bg); }

/* Smooth page-to-page transitions (cross-document View Transitions — Chrome/Edge/Safari 18+; others navigate normally) */
/* cross-document view transitions disabled — page fade is handled in theme.js + the server shell (prevents multiple flashes) */
::view-transition-old(root) { animation: as-vt-out .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: as-vt-in .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes as-vt-out { to { opacity: 0; transform: translateY(-10px) scale(.995); } }
@keyframes as-vt-in { from { opacity: 0; transform: translateY(16px); } }
header, [data-site-header] { view-transition-name: as-header; }
::view-transition-group(as-header) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
html { background: var(--color-bg); }

/* Native selects: themed dropdown lists (dark mode was white-on-white) */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
select option, select optgroup { background-color: var(--color-surface); color: var(--color-text); }