/* Auto Finance 123 theme tokens — layered over the Modernist sheet. Direction "1·2·3 Hexagon": precise 6–12px radii, navy ink, green actions, logo blue accents. */
/* No reserved scrollbar gutter: with the full-width frame the header and footer must reach the window edge (the shell also sets stable inline, hence !important) */
html { scrollbar-gutter: auto !important; }
:root, [data-theme] {
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px;
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --as-red: #d93a3f; --as-green: #2f9e44;
  --as-red-badge: #c62f2f; /* white badge text on red passes contrast (5.4:1) */
  --as-brand: #2563eb; /* default brand colour — the dealer's own comes from dealers.json → brand.colors (Worker) */
  --as-brand-btn: #1d4ed8; /* one step darker: white button text must pass WCAG AA (4.5:1) */
  --af-wrap: 1320px;
  --af-hex: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  --af-cut: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}
:root, [data-theme="light"] {
  --color-bg: #f4f7f5; --color-surface: #ffffff; --as-surface-2: #e8f0eb;
  --color-text: #0e1c2a; --as-muted: #4a5a69;
  --color-divider: rgba(14, 28, 42, .10); --as-line-strong: rgba(14, 28, 42, .20);
  /* Brand colour: buttons, selected filters, checkboxes, active page — the "action" colour. */
  --as-ink: var(--as-brand-btn); --as-on-ink: #ffffff; --as-logo-plate: transparent;
  --color-accent: var(--as-brand); --color-accent-100: #e8effd; --color-accent-800: #1e3a8a;
  --af-blue: var(--color-accent-800); --af-blue-strong: var(--color-accent-800); --af-green-text: var(--as-brand-btn); --af-navy: #0b2a4a; --af-green-soft: var(--color-accent-100); --af-blue-soft: #e6f1fa;
  --as-stripe: rgba(14, 28, 42, .05);
  --shadow-sm: 0 1px 2px rgba(11, 42, 74, .06), 0 2px 8px rgba(11, 42, 74, .04);
  --shadow-md: 0 10px 30px rgba(11, 42, 74, .10);
  --shadow-lg: 0 24px 60px rgba(11, 42, 74, .18);
}
[data-theme="dark"] {
  --color-bg: #0a1520; --color-surface: #10202f; --as-surface-2: #172a3b;
  --color-text: #edf3f7; --as-muted: #9fb1c2;
  --color-divider: rgba(237, 243, 247, .10); --as-line-strong: rgba(237, 243, 247, .20);
  /* Same brand colour 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: #1a2236; --color-accent-800: #9db8f8;
  --af-blue: #6fb7ea; --af-blue-strong: #0b6aa8; --af-green-text: var(--color-accent-800); --af-navy: #071422; --af-green-soft: var(--color-accent-100); --af-blue-soft: #0f2a40;
  --as-stripe: rgba(237, 243, 247, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .40);
  --shadow-lg: 0 0 0 1px rgba(237, 243, 247, .06), 0 30px 70px rgba(0, 0, 0, .55);
}

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

/* Shared building blocks of the "1·2·3 Hexagon" design (used by the page templates) */
[data-af-wrap] { width: 100%; max-width: var(--af-wrap); margin: 0 auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); box-sizing: border-box; }
[data-af-sec] { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
[data-af-kicker] { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--af-green-text); }
[data-af-kicker] { max-width: 100%; white-space: normal; line-height: 1.35; }
[data-af-kicker]::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--as-brand); clip-path: var(--af-hex); }
[data-af-hexnum] { clip-path: var(--af-hex); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
[data-af-card] { position: relative; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
[data-af-card]::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--af-edge, var(--as-brand)); }
[data-af-btn] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-md); font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); box-sizing: border-box; }
@media (max-width: 600px) { [data-af-btn] { white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; max-width: 100%; } }
[data-af-btn="primary"] { background: var(--as-ink); color: var(--as-on-ink); border: 0; }
[data-af-btn="primary"]:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--as-ink) 35%, transparent); transform: translateY(-1px); opacity: 1; }
[data-af-btn="ghost"] { background: transparent; color: var(--color-text); border: 2px solid var(--af-blue); }
[data-af-btn="ghost"]:hover { background: var(--af-blue-soft); opacity: 1; }
[data-af-btn="light"] { background: #ffffff; color: #0b2a4a; border: 0; }
[data-af-rule] { height: 3px; background: linear-gradient(90deg, var(--af-blue-strong) 0%, var(--af-blue-strong) 38%, var(--as-brand) 62%, var(--as-brand) 100%); }
[data-af-tab] { position: relative; }
[data-af-tab]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--as-brand); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
[data-af-tab]:hover::after, [data-af-tab][aria-current="page"]::after { transform: scaleX(1); }
[data-site] a:focus-visible, [data-site] button:focus-visible, [data-site] select:focus-visible, [data-site] input:focus-visible, [data-site] textarea:focus-visible { outline: 3px solid var(--af-blue); outline-offset: 2px; }
[data-theme="dark"] [data-logo-light] { display: none !important; }
[data-theme="light"] [data-logo-dark], :root:not([data-theme]) [data-logo-dark] { display: none !important; }
details[data-af-faq] > summary { list-style: none; cursor: pointer; }
details[data-af-faq] > summary::-webkit-details-marker { display: none; }
details[data-af-faq] > summary [data-af-plus] { transition: transform .25s var(--ease); }
details[data-af-faq][open] > summary [data-af-plus] { transform: rotate(45deg); }

[data-skip-link] { position: fixed; left: 12px; top: 12px; z-index: 4000; transform: translateY(-160%); padding: 12px 16px; border-radius: 10px; background: var(--as-ink); color: var(--as-on-ink); font: 700 14px/1 var(--font-body); text-decoration: none; transition: transform .18s var(--ease); }
[data-skip-link]:focus { transform: translateY(0); outline: 3px solid var(--color-text); outline-offset: 3px; }

/* 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; } [data-af-btn] { transition: 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); }

/* Header gets smaller once the page is scrolled (html.as-scrolled is set by motion.js) — desktop bar only */
@media (min-width: 892px) {
  header[data-keep] [data-af-wrap] { transition: padding .25s var(--ease); }
  html.as-scrolled header[data-keep] [data-af-wrap] { padding-top: 4px !important; padding-bottom: 4px !important; }
  html.as-scrolled header[data-keep] [data-af-wrap] > div:first-child { min-height: 50px !important; }
  html.as-scrolled header[data-keep] a[aria-label] > img { height: 30px !important; }
}

/* First-paint shell (engine page-shell.js) always loads logo.webp: in the dark theme show the white-text logo there too */
#as-shell:not(.lt) .in img { content: url(/assets/brand/logo-dark.webp); }