:root {
  --brand-primary: #12324a;
  --brand-secondary: #e11f26;
  --brand-accent: #e11f26;
  --brand-surface: #ffffff;
  --brand-text: #17212b;
  --brand-on-primary: #ffffff;
  --brand-accent-dark: #a90f15;
  --brand-hero-start: #08090b;
  --brand-hero-middle: #16191d;
  --brand-hero-end: #24282d;
  --brand-accent-soft: rgba(225, 31, 38, .2);
}

/* Bridge the chooser tokens into the existing shared template tokens. */
html[data-brand] {
  --red: var(--brand-accent);
  --red-dark: var(--brand-accent-dark);
  --primary-color: var(--brand-accent);
  --brand-utility-bg: var(--brand-secondary);
  --brand-nav-bg: var(--brand-primary);
  --brand-nav-text: var(--brand-on-primary);
  --brand-nav-line: color-mix(in srgb, var(--brand-on-primary) 18%, transparent);
  --brand-nav-hover-bg: color-mix(in srgb, var(--brand-on-primary) 13%, transparent);
  --brand-hero-text: var(--brand-on-primary);
  --brand-hero-muted: color-mix(in srgb, var(--brand-on-primary) 80%, transparent);
  --brand-hero-outline: color-mix(in srgb, var(--brand-on-primary) 72%, transparent);
}

html[data-brand] .nav { background: var(--brand-nav-bg); }
html[data-brand] #logo .logo__primary,
html[data-brand] .logo__primary { fill: var(--brand-logo-primary, var(--brand-accent)) !important; }
html[data-brand] #logo .logo__contrast,
html[data-brand] .logo__contrast { fill: var(--brand-logo-contrast, var(--brand-on-primary)) !important; }
html[data-brand] .hero,
html[data-brand] .hero-bg--angles {
  background: radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--brand-accent) 28%, transparent), transparent 30%), linear-gradient(118deg, var(--brand-hero-start) 0%, var(--brand-hero-middle) 58%, var(--brand-hero-end) 100%);
}
html[data-brand] .hero::after,
html[data-brand] .hero-bg--angles::after { border-top-color: var(--brand-accent); }
html[data-brand] .hero__actions .btn--primary,
html[data-brand] .nav .btn--primary { border-color: var(--brand-accent); background: var(--brand-accent); }
html[data-brand] .hero__actions .btn--primary:hover,
html[data-brand] .nav .btn--primary:hover { border-color: var(--brand-accent-dark); background: var(--brand-accent-dark); }

.brand-preview,
.brand-preview * { box-sizing: border-box; }
.brand-preview { position: relative; z-index: 100; width: 100%; color: #17212b; background: #f3f5f7; border-bottom: 1px solid #cbd2d9; font: 14px/1.4 Arial, Helvetica, sans-serif; }
.brand-preview__bar { display: flex; min-height: 52px; padding: 8px clamp(16px, 3vw, 40px); align-items: center; justify-content: space-between; gap: 20px; }
.brand-preview__bar > div { display: flex; align-items: baseline; gap: 10px; }
.brand-preview__bar strong { font-size: 14px; }
.brand-preview__bar span { color: #5c6873; font-size: 12px; }
.brand-preview button,
.brand-preview select { min-height: 38px; border: 1px solid #aeb8c2; border-radius: 5px; background: #fff; color: #17212b; font: inherit; }
.brand-preview button { padding: 7px 14px; cursor: pointer; font-weight: 700; }
.brand-preview button:hover { border-color: #596875; }
.brand-preview button:focus-visible,
.brand-preview select:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-accent) 45%, transparent); outline-offset: 2px; }
.brand-preview__toggle { border-color: var(--brand-primary) !important; background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; }
.brand-preview__controls { display: grid; grid-template-columns: repeat(2, minmax(180px, 280px)) auto minmax(240px, 1fr); padding: 18px clamp(16px, 3vw, 40px) 22px; align-items: end; gap: 16px; border-top: 1px solid #d7dde2; background: #fff; }
.brand-preview__controls[hidden] { display: none; }
.brand-preview__controls label { display: grid; gap: 6px; font-weight: 700; }
.brand-preview__controls select { width: 100%; padding: 7px 34px 7px 10px; }
.brand-preview__reset { background: #fff !important; }
.brand-preview__note { margin: 0; color: #5c6873; font-size: 12px; }

.site-brand-lockup { display: inline-flex; min-width: 0; align-items: center; gap: clamp(10px, 1.5vw, 22px); }
.site-brand-lockup [data-dealer-logo] { min-width: 0; }
.site-brand-lockup [data-dealer-logo] img,
.site-brand-lockup [data-dealer-logo] svg { display: block; }
.manufacturer-logo { display: block; width: auto; max-width: 118px; height: 42px; object-fit: contain; }
.manufacturer-logo[hidden] { display: none; }

@media (max-width: 760px) {
  .brand-preview__bar > div { display: grid; gap: 1px; }
  .brand-preview__controls { grid-template-columns: 1fr; align-items: stretch; }
  .brand-preview__reset { justify-self: start; }
  .manufacturer-logo { max-width: 82px; height: 32px; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-preview__controls { animation: brand-preview-reveal 160ms ease-out; }
  @keyframes brand-preview-reveal { from { opacity: 0; transform: translateY(-4px); } }
}