/* Amiral Autos theme tokens — layered over the Modernist sheet. Sharp showroom look: graphite surfaces, hairlines, small radii. */
html { scrollbar-gutter: stable; }
:root, [data-theme] {
  --r-xs: 6px; --r-sm: 6px; --r-md: 6px; --r-lg: 10px; --r-pill: 6px;
  --radius-sm: 6px; --radius-md: 6px; --radius-lg: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --as-red: #e5484d; --as-green: #30a46c;
  --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) */
}
:root, [data-theme="light"] {
  --color-bg: #f5f7f9; --color-surface: #ffffff; --as-surface-2: #e9edf1;
  --color-text: #0e1114; --as-muted: #56606a;
  --color-divider: rgba(27, 28, 31, .10); --as-line-strong: rgba(27, 28, 31, .18);
  /* Brand colour: 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: var(--as-brand); --color-accent-100: #e8effd; --color-accent-800: #1e3a8a;
  --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: #0f1113; --color-surface: #171a1e; --as-surface-2: #21262b;
  --color-text: #f2f4f6; --as-muted: #a1aab3;
  --color-divider: rgba(242, 242, 240, .09); --as-line-strong: rgba(242, 242, 240, .18);
  /* 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;
  --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); }

[data-skip-link] { position: fixed; left: 12px; top: 12px; z-index: 4000; transform: translateY(-160%); padding: 12px 16px; border-radius: 12px; 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; } }
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); }

/* Showroom look: uppercase tracked eyebrows, hairline cards */
[data-kicker], .as-kicker { text-transform: uppercase; letter-spacing: .14em; }

/* Arrow icons (inline SVG, inherit the text colour) */
.as-ico { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -0.18em; }

/* Accordion icon (FAQ, landing pages, extra blocks, finance FAQ): a plus that becomes a minus when the item is open */
.acc-ico { position: relative; flex: none; display: inline-block; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid var(--as-line-strong); border-radius: var(--r-xs); color: var(--as-muted); }
.acc-ico::before, .acc-ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.acc-ico::after { transform: rotate(90deg); }
details[open] > summary .acc-ico::after, [aria-expanded="true"] .acc-ico::after { transform: rotate(0); opacity: 0; }