/**
 * rideSWB visual identity — scoped to .brand-swb (set on <html> for swb
 * builds only via Layout.astro). Loaded as a static stylesheet only in swb
 * builds, so the 88 Wheel Co / Boa compiled CSS stays byte-identical.
 *
 * Brand tokens (from the rideSWB logo + rideswb.com):
 *   orange #ff6900 · warm cream #f2dfba · base charcoal #17130f
 *   surface #211b15 · text #f5efe6
 *   Anton display (self-hosted) · Work Sans body · pill buttons · 16px cards
 *   Dark-first: the whole page runs on charcoal; there are no light sections.
 */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton.woff2') format('woff2');
}

/* ------------------------------------------------------------- palette */
.brand-swb {
  --swb-orange: #ff6900;
  --swb-orange-bright: #ff7d1f; /* hover state */
  --swb-cream: #f2dfba;
  --swb-base: #17130f;
  --swb-surface: #211b15;
  --swb-surface-2: #2b231b;
  --swb-text: #f5efe6;
  --swb-muted: #b3a896;
  --swb-line: #3a2f24;
}

/* ------------------------------------------------------ dark page base */
html.brand-swb body {
  background-color: var(--swb-base);
  color: var(--swb-text);
}

/* Neutral ramp -> warm charcoal ramp (surfaces, borders, secondary text). */
.brand-swb .text-rcommerce-900 { color: var(--swb-text); }
.brand-swb .text-rcommerce-700 { color: #d8cfc0; }
.brand-swb .text-rcommerce-600 { color: #c4b8a5; }
.brand-swb .text-rcommerce-500 { color: #a89a83; }
.brand-swb .text-rcommerce-400 { color: #8d7f6a; }
.brand-swb .text-rcommerce-300 { color: var(--swb-cream); }
.brand-swb .bg-white { background-color: var(--swb-surface); }
.brand-swb .bg-rcommerce-50 { background-color: var(--swb-surface); }
.brand-swb .bg-rcommerce-100 { background-color: var(--swb-surface-2); }
.brand-swb .border-rcommerce-200 { border-color: var(--swb-line); }
.brand-swb .border-rcommerce-300 { border-color: var(--swb-line); }
.brand-swb .divide-rcommerce-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--swb-line); }
.brand-swb .placeholder\:text-rcommerce-400::placeholder { color: #8d7f6a; }

/* Links & brand accents: the single orange accent does all the work. */
.brand-swb .text-rcommerce-accent,
.brand-swb .hover\:text-rcommerce-accent:hover { color: var(--swb-orange); }
.brand-swb .decoration-rcommerce-accent { text-decoration-color: var(--swb-orange); }
.brand-swb .fill-rcommerce-accent { fill: var(--swb-orange); }
.brand-swb .focus\:border-rcommerce-accent:focus,
.brand-swb .focus\:ring-rcommerce-accent:focus { border-color: var(--swb-orange); --tw-ring-color: var(--swb-orange); }
.brand-swb ::selection { background-color: var(--swb-orange); color: var(--swb-base); }

/* Status colors: keep legible on charcoal. */
.brand-swb .text-rcommerce-danger { color: #ff6b6b; }
.brand-swb .bg-rcommerce-danger { background-color: #e5484d; }
.brand-swb .text-rcommerce-success { color: #4ade80; }

/* Sale badges -> charcoal text on cream (AA on orange fails for small text,
   so badges never put small white text on the orange). */
.brand-swb .bg-rcommerce-highlight { background-color: var(--swb-cream); color: var(--swb-base); }

/* --------------------------------------------------------- typography */
/* Heavy condensed display for headlines — no serif anywhere on swb pages.
   (html.brand-swb prefix wins over the legacy .brand-sans .font-serif rule
   in global.css regardless of stylesheet order.) */
html.brand-swb h1,
html.brand-swb h2,
html.brand-swb h3,
html.brand-swb h4,
html.brand-swb h5,
html.brand-swb h6,
html.brand-swb .font-serif,
html.brand-swb .eyebrow {
  font-family: 'Anton', 'Arial Narrow', 'Impact', sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01em;
}
/* Body stays the storefront's existing sans. */
html.brand-swb body,
html.brand-swb .font-sans {
  font-family: 'Work Sans', system-ui, sans-serif;
}
/* Eyebrow labels: small-caps tracked, cream — one per section max, enforced
   in the swb page markup. */
html.brand-swb .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  color: var(--swb-cream);
}

/* -------------------------------------------------------------- shape */
/* Pill buttons (matches the rounded SWB logo badge). Primary CTAs are
   orange with charcoal text (white-on-orange only passes for large text,
   so button labels never use it). */
.brand-swb .btn,
.brand-swb .btn-primary,
.brand-swb .btn-secondary,
.brand-swb .btn-accent { border-radius: 9999px; }

.brand-swb .btn-primary { background-color: var(--swb-orange); color: var(--swb-base); }
.brand-swb .btn-primary:hover { background-color: var(--swb-orange-bright); }
.brand-swb .btn-accent { background-color: var(--swb-orange); color: var(--swb-base); }
.brand-swb .btn-accent:hover { background-color: var(--swb-orange-bright); color: var(--swb-base); }
.brand-swb .btn-secondary {
  background-color: transparent;
  border-color: var(--swb-cream);
  color: var(--swb-cream);
}
.brand-swb .btn-secondary:hover { border-color: var(--swb-orange); color: var(--swb-orange); background-color: transparent; }

/* -------------------------------------------------------- product cards */
/* Soft cards: 16px radius, dark surface, orange price, hover lift. */
.brand-swb .product-card {
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.brand-swb .product-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.brand-swb .product-card .product-price { color: var(--swb-orange); font-weight: 600; }

/* --------------------------------------------------------------- header */
/* Dark sticky chrome: charcoal bar, hairline border, cream text. */
.brand-swb header.sticky {
  background-color: rgba(23, 19, 15, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--swb-line);
}
.brand-swb header nav { height: 76px; }
.brand-swb header .text-rcommerce-900 { color: var(--swb-text); }
.brand-swb #mobile-menu { background-color: var(--swb-base); border-color: var(--swb-line); }
.brand-swb header input[type='search'] { color: var(--swb-text); }

/* --------------------------------------------------------------- footer */
.brand-swb footer .bg-rcommerce-900 { background-color: var(--swb-base); }
.brand-swb footer input[type='email'] { color: var(--swb-text); }
/* Fewer shop columns than 88/boa: let the brand blurb breathe across two. */
.brand-swb footer .grid > div:first-child { grid-column: span 2 / span 2; }

/* -------------------------------------------------------------- inputs */
.brand-swb .input,
.brand-swb input,
.brand-swb select,
.brand-swb textarea {
  background-color: var(--swb-surface-2);
  color: var(--swb-text);
  border-color: var(--swb-line);
}
.brand-swb .input:focus,
.brand-swb input:focus,
.brand-swb select:focus,
.brand-swb textarea:focus {
  border-color: var(--swb-orange);
}

/* ------------------------------------------- contact page FAQ accordion */
.brand-swb .faq-chevron { transition: transform 0.2s ease; }
.brand-swb .faq-btn[aria-expanded='true'] .faq-chevron { transform: rotate(45deg); }

/* --------------------------------------------------------- kinetic strip */
/* The one marquee on the homepage. Pure CSS translation, duplicated track
   (second copy aria-hidden), paused for reduced motion. */
.swb-marquee {
  overflow: hidden;
  background-color: var(--swb-orange);
  color: var(--swb-base);
}
.swb-marquee-track {
  display: flex;
  width: max-content;
  animation: swb-marquee 28s linear infinite;
}
.swb-marquee-track > span {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.85rem 1.25rem 0.85rem 2.5rem;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.swb-marquee-track .swb-marquee-dot { color: var(--swb-base); }
@keyframes swb-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------- a11y & motion */
@media (prefers-reduced-motion: reduce) {
  .brand-swb .product-card,
  .brand-swb .product-card:hover {
    transition: none;
    transform: none;
    box-shadow: none;
  }
  .brand-swb .faq-chevron { transition: none; }
  .swb-marquee-track { animation: none; }
}