/* Auto Luana theme tokens — "Noir showroom": strict monochrome, squared corners echoing the logo, editorial type. Layered over the Modernist sheet. */
html { scrollbar-gutter: stable; }
:root, [data-theme] {
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --as-red: #d93a3f; --as-green: #2f9e66;
  --as-red-badge: #b42d2d; /* white badge text on red passes contrast */
  --as-brand: #2b2b2e; /* fallback only: the dealer's own colours come from dealers.json → brand.colors (Worker) */
  --as-brand-btn: #0c0c0d;
  --as-side: 28px; /* one side padding for header, every section, every page and the footer */
  --as-gap-sec: clamp(44px, 5vw, 72px); /* vertical rhythm between sections (one value on every page) */
  --as-gap-head: clamp(24px, 2.6vw, 32px); /* section heading block to its content */
  --as-noir: #0b0b0c; --as-noir-2: #151517; --as-noir-line: rgba(255, 255, 255, .1); --as-on-noir: #f4f4f2; --as-on-noir-muted: #a9a9ad;
  --font-display: "Archivo", system-ui, sans-serif;
}
:root, [data-theme="light"] {
  /* Stage bands (hero, finance block, call-to-action boxes): a warm light grey in the light theme */
  --stage-bg: #ebeae6; --stage-fg: #0c0c0d; --stage-soft: #3f4045; --stage-muted: #5d5e63; --stage-line: rgba(12, 12, 13, .14);
  --color-bg: #ffffff; --color-surface: #ffffff; --as-surface-2: #f3f3f1;
  --color-text: #0c0c0d; --as-muted: #55565b;
  --color-divider: rgba(12, 12, 13, .10); --as-line-strong: rgba(12, 12, 13, .22);
  /* Action colour: black buttons, selected filters, checkboxes, active page. */
  --as-ink: var(--as-brand-btn); --as-on-ink: #ffffff; --as-logo-plate: transparent;
  --color-accent: var(--as-brand); --color-accent-100: #f0f0ee; --color-accent-800: var(--as-brand);
  --as-stripe: rgba(12, 12, 13, .05);
  --shadow-sm: 0 1px 2px rgba(10, 10, 12, .06);
  --shadow-md: 0 10px 28px rgba(10, 10, 12, .08);
  --shadow-lg: 0 28px 70px rgba(10, 10, 12, .16);
}
[data-theme="dark"] {
  --stage-bg: #131315; --stage-fg: #ffffff; --stage-soft: #c9c9cc; --stage-muted: #a9a9ad; --stage-line: rgba(255, 255, 255, .12);
  --color-bg: #0b0b0c; --color-surface: #141416; --as-surface-2: #1f1f22;
  --color-text: #f4f4f2; --as-muted: #a9a9ad;
  --color-divider: rgba(244, 244, 242, .10); --as-line-strong: rgba(244, 244, 242, .22);
  /* In the dark theme the action colour turns white (black on black would vanish). */
  --as-ink: #f4f4f2; --as-on-ink: #0b0b0c; --as-logo-plate: transparent;
  --color-accent: #f4f4f2; --color-accent-100: #1d1d20; --color-accent-800: #ededeb;
  --as-stripe: rgba(244, 244, 242, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 0 0 1px rgba(244, 244, 242, .06), 0 30px 70px rgba(0, 0, 0, .6);
}

/* Header: dark bar in the dark theme, white bar (black text, black buttons) in the light theme, like the dealer's current site */
:root, [data-theme] {
  --hdr-bg: #0b0b0c; --hdr-pop: #111113; --hdr-on: #ffffff; --hdr-nav: rgba(244, 244, 242, .72); --hdr-text: #f4f4f2; --hdr-muted: #a9a9ad;
  --hdr-surface: #141416; --hdr-surface2: rgba(255, 255, 255, .08); --hdr-line: rgba(255, 255, 255, .18); --hdr-line-2: rgba(255, 255, 255, .12); --hdr-line-soft: rgba(255, 255, 255, .08); --hdr-hover: rgba(255, 255, 255, .08);
}
[data-theme="light"] {
  --hdr-bg: #ffffff; --hdr-pop: #ffffff; --hdr-on: #0c0c0d; --hdr-nav: rgba(12, 12, 13, .68); --hdr-text: #0c0c0d; --hdr-muted: #55565b;
  --hdr-surface: #ffffff; --hdr-surface2: rgba(12, 12, 13, .05); --hdr-line: rgba(12, 12, 13, .2); --hdr-line-2: rgba(12, 12, 13, .12); --hdr-line-soft: rgba(12, 12, 13, .08); --hdr-hover: rgba(12, 12, 13, .06);
}
header[data-noir] { color-scheme: dark; }
[data-theme="light"] header[data-noir] { color-scheme: light; }
[data-theme="light"] header[data-noir] a > img[src*="logo-white"] { filter: invert(1); }
header[data-noir] [data-btn="white"] { background: var(--hdr-on); color: var(--hdr-bg); border-color: var(--hdr-on); }
header[data-noir] [data-btn="outline-white"] { background: transparent; color: var(--hdr-on); border-color: var(--hdr-line); }
@media (hover: hover) {
  header[data-noir] [data-btn="white"]:hover { background: transparent; color: var(--hdr-on); }
  header[data-noir] [data-btn="outline-white"]:hover { background: var(--hdr-on); color: var(--hdr-bg); border-color: var(--hdr-on); }
}
header[data-noir] :focus-visible { outline-color: var(--hdr-on); }

html, body { margin: 0; background: var(--color-bg); }
/* One side padding for header, sections and footer; 16 px on phones (the first-paint shell uses the same values) */
@media (max-width: 819.98px) { :root, [data-theme] { --as-side: 16px; } }
::selection { background: var(--as-ink); color: var(--as-on-ink); }

[data-skip-link] { position: fixed; left: 12px; top: 12px; z-index: 4000; transform: translateY(-160%); padding: 12px 16px; border-radius: var(--r-sm); 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; }
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
header :focus-visible, footer :focus-visible, [data-noir] :focus-visible { outline-color: #ffffff; }

/* Smooth page-to-page transitions (cross-document View Transitions — Chrome/Edge/Safari 18+; others navigate normally) */
/* Page changes: no fade or slide (the shell already matches the header, so the page simply appears) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
#as-shell { transition: none !important; }
@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 */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
select option, select optgroup { background-color: var(--color-surface); color: var(--color-text); }

/* ---- Noir showroom pieces shared by the pages ---- */
/* Kicker: a short uppercase label with a thin rule before it */
[data-kicker] { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--as-muted); }
[data-kicker]::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
[data-noir] [data-kicker], [data-kicker][data-on-noir] { color: var(--as-on-noir-muted); }
[data-stage] [data-kicker] { color: var(--stage-muted); }
/* Hairline that draws itself (data-gsap="line") */
[data-rule] { display: block; height: 1px; background: var(--color-divider); transform-origin: 0 50%; }
/* Buttons */
[data-btn] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: var(--r-sm); font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
[data-btn="solid"] { background: var(--as-ink); color: var(--as-on-ink); border: 1px solid var(--as-ink); }
[data-btn="ghost"] { background: transparent; color: var(--color-text); border: 1px solid var(--as-line-strong); }
[data-btn="white"] { background: #ffffff; color: #0b0b0c; border: 1px solid #ffffff; }
[data-btn="outline-white"] { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, .45); }
@media (hover: hover) {
  [data-btn="solid"]:hover { opacity: 1; background: transparent; color: var(--color-text); }
  [data-btn="ghost"]:hover { opacity: 1; background: var(--as-ink); color: var(--as-on-ink); border-color: var(--as-ink); }
  [data-btn="white"]:hover { opacity: 1; background: transparent; color: #ffffff; }
  [data-btn="outline-white"]:hover { opacity: 1; background: #ffffff; color: #0b0b0c; border-color: #ffffff; }
  [data-btn] [data-arrow] { transition: transform .35s var(--ease); }
  [data-btn]:hover [data-arrow] { transform: translateX(4px); }
}
/* Image boxes: slow zoom on hover */
[data-zoombox] { overflow: hidden; }
[data-zoombox] img { transition: transform 1.2s var(--ease); }
@media (hover: hover) { a:hover [data-zoombox] img, [data-zoombox]:hover img { transform: scale(1.04); } }
/* Text links with a drawn underline */
[data-uline] { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); padding-bottom: 2px; }
@media (hover: hover) { [data-uline]:hover { background-size: 100% 1px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-zoombox] img, [data-btn], [data-uline] { transition: none; } }
/* On phones a long button label wraps inside its block instead of running past it */
@media (max-width: 480px) { [data-btn] { white-space: normal; text-align: center; max-width: 100%; padding-top: 12px; padding-bottom: 12px; line-height: 1.25; } }