/* ============================================================
   brand.css - XS Wheels
   Direction: electric blue script mark, lime ring accents,
   glossy charcoal surfaces, cleaner light-mode variant.
   ============================================================ */
:root {
  --brand-primary:   #1477ff;
  --brand-secondary: #0a4fc2;
  --brand-accent:    #8cc63f;

  --color-bg:        #04070b;
  --color-surface:   #0b1118;
  --color-border:    rgba(140, 198, 63, 0.16);
  --color-text:      #f4f8fc;
  --color-text-2:    #9aa7bb;
  --color-text-3:    #546173;

  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  --xs-glow:      0 0 30px rgba(20, 119, 255, 0.32);
  --xs-accent-glow: 0 0 26px rgba(140, 198, 63, 0.24);
  --xs-panel: linear-gradient(180deg, rgba(11, 17, 24, 0.95), rgba(5, 9, 14, 0.92));
}

[data-theme="light"] {
  --brand-primary:   #0a84ff;
  --brand-secondary: #0d5cb6;
  --brand-accent:    #88c344;
  --color-bg:        #f4f7fb;
  --color-surface:   #ffffff;
  --color-border:    rgba(10, 17, 24, 0.10);
  --color-text:      #111827;
  --color-text-2:    #5f6d80;
  --color-text-3:    #95a1b3;
  --xs-glow:         0 0 22px rgba(10, 132, 255, 0.15);
  --xs-accent-glow:  0 0 18px rgba(136, 195, 68, 0.12);
  --xs-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 246, 251, 0.94));
}

[data-theme="light"] .nav {
  background: rgba(244, 247, 251, 0.9);
  border-bottom-color: rgba(17, 24, 39, 0.08);
}

/* Light-theme nav-logo ring removed — logo artwork is the brand mark. */

[data-theme="light"] #particles-canvas {
  opacity: 0.26;
}

/* Logo dark/light swap.
   Uses :root attribute selectors to outrank `.nav-logo { display: block }`
   in shared/site.css (which loads after brand.css). Without this specificity
   bump, both logo variants render simultaneously. */
:root:not([data-theme="light"]) .nav-logo--light,
:root:not([data-theme="light"]) .footer-logo.nav-logo--light,
:root:not([data-theme="light"]) .hero-brand-logo.nav-logo--light {
  display: none;
}
[data-theme="light"] .nav-logo--default,
[data-theme="light"] .footer-logo.nav-logo--default,
[data-theme="light"] .hero-brand-logo.nav-logo--default {
  display: none;
}
[data-theme="light"] .nav-logo--light,
[data-theme="light"] .footer-logo.nav-logo--light {
  display: block;
}
[data-theme="light"] .hero-brand-logo.nav-logo--light {
  display: block;
}

/* Hero vehicle — full-bleed background of the hero section, with a
   left-to-right gradient so headline copy stays legible over the photo. */
.hero {
  overflow: hidden;
}
.hero-vehicle {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-vehicle::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4,7,11,0.94) 0%, rgba(4,7,11,0.78) 38%, rgba(4,7,11,0.42) 70%, rgba(4,7,11,0.18) 100%),
    linear-gradient(180deg, rgba(4,7,11,0.30) 0%, rgba(4,7,11,0.55) 100%);
  pointer-events: none;
}
.hero-vehicle-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 35%;
}
/* Lift hero content above the background photo. */
.hero-copy,
.hero-visual,
.hero-highlights {
  position: relative;
  z-index: 1;
}
[data-theme="light"] .hero-vehicle::after {
  background:
    linear-gradient(90deg, rgba(244,247,251,0.94) 0%, rgba(244,247,251,0.80) 38%, rgba(244,247,251,0.45) 70%, rgba(244,247,251,0.18) 100%),
    linear-gradient(180deg, rgba(244,247,251,0.25) 0%, rgba(244,247,251,0.55) 100%);
}