/* ============================================================
   BYD Parts China — CMS Template Stylesheet
   ------------------------------------------------------------
   Extracted from the original multi-theme design token contract.
   Includes: base :root tokens, 7 theme classes, base typography,
   semantic token fallbacks, utility classes, critical layout,
   and hero text color overrides for cross-theme readability.
   ============================================================ */

/* ============================================================
   Base / default theme (Dark Industrial)
   ============================================================ */
:root {
  /* Primary accent: refined industrial gold */
  --byd-primary: #D4A853;
  --byd-primary-600: #E0B86A;
  --byd-primary-700: #B08D3F;
  --byd-primary-foreground: #0A0B0D;

  /* Neutral surfaces — deep industrial darks */
  --byd-background: #0A0B0D;
  --byd-foreground: #F2F2F5;
  --byd-card: #16181D;
  --byd-card-foreground: #F2F2F5;
  --byd-popover: #16181D;
  --byd-popover-foreground: #F2F2F5;
  --byd-muted: #1E2128;
  --byd-muted-foreground: #8A8F99;
  --byd-border: #2A2E36;
  --byd-input: #2A2E36;
  --byd-ring: #D4A853;

  /* Secondary text steps */
  --byd-ink: #F2F2F5;
  --byd-ink-2: #B0B5BE;
  --byd-ink-3: #8A8F99;
  --byd-line: #2A2E36;
  --byd-surface: #16181D;
  --byd-surface-2: #1E2128;

  /* Hero media */
  --byd-hero-image: url('../assets/hero-dark-industrial.jpg');
  --byd-hero-overlay: linear-gradient(to right, rgba(10,11,13,0.85) 0%, rgba(10,11,13,0.55) 60%, rgba(10,11,13,0.35) 100%);

  /* Hero foreground — alias of --byd-foreground by default.
     Templates may set inline style="color: var(--byd-hero-foreground)"
     on hero text so it stays readable against background images. */
  --byd-hero-foreground: var(--byd-foreground);

  /* Radius */
  --byd-radius-sm: 4px;
  --byd-radius-md: 8px;
  --byd-radius-lg: 12px;
  --byd-radius-pill: 999px;

  /* Shadow — dark-ambient depth for floating layers */
  --byd-shadow-overlay: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.15);
  --byd-shadow-popover: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
  --byd-shadow-modal: 0 24px 60px -20px rgba(0, 0, 0, 0.45);

  /* State colors */
  --byd-state-success: #22C55E;
  --byd-state-warning: #F59E0B;
  --byd-state-error: #EF4444;
  --byd-state-info: #38BDF8;

  /* Typography */
  --byd-font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --byd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================
   Theme classes
   ============================================================ */
.theme-dark {
  --byd-primary: #D4A853;
  --byd-primary-600: #E0B86A;
  --byd-primary-700: #B08D3F;
  --byd-primary-foreground: #0A0B0D;

  --byd-background: #0A0B0D;
  --byd-foreground: #F2F2F5;
  --byd-card: #16181D;
  --byd-card-foreground: #F2F2F5;
  --byd-popover: #16181D;
  --byd-popover-foreground: #F2F2F5;
  --byd-muted: #1E2128;
  --byd-muted-foreground: #8A8F99;
  --byd-border: #2A2E36;
  --byd-input: #2A2E36;
  --byd-ring: #D4A853;

  --byd-ink: #F2F2F5;
  --byd-ink-2: #B0B5BE;
  --byd-ink-3: #8A8F99;
  --byd-line: #2A2E36;
  --byd-surface: #16181D;
  --byd-surface-2: #1E2128;

  --byd-hero-image: url('../assets/hero-dark-industrial.jpg');
  --byd-hero-overlay: linear-gradient(to right, rgba(10,11,13,0.85) 0%, rgba(10,11,13,0.55) 60%, rgba(10,11,13,0.35) 100%);
}

.theme-light {
  --byd-primary: #2563EB;
  --byd-primary-600: #1D4ED8;
  --byd-primary-700: #1E40AF;
  --byd-primary-foreground: #FFFFFF;

  --byd-background: #F8F9FB;
  --byd-foreground: #111827;
  --byd-card: #FFFFFF;
  --byd-card-foreground: #111827;
  --byd-popover: #FFFFFF;
  --byd-popover-foreground: #111827;
  --byd-muted: #F3F4F6;
  --byd-muted-foreground: #6B7280;
  --byd-border: #E5E7EB;
  --byd-input: #E5E7EB;
  --byd-ring: #2563EB;

  --byd-ink: #111827;
  --byd-ink-2: #4B5563;
  --byd-ink-3: #6B7280;
  --byd-line: #E5E7EB;
  --byd-surface: #FFFFFF;
  --byd-surface-2: #F3F4F6;

  --byd-hero-image: url('../assets/hero-theme-light.jpg');
  --byd-hero-overlay: linear-gradient(to right, rgba(248,249,251,0.92) 0%, rgba(248,249,251,0.78) 50%, rgba(248,249,251,0.40) 100%);

  --byd-shadow-overlay: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.05);
  --byd-shadow-popover: 0 8px 24px -8px rgba(0, 0, 0, 0.14);
  --byd-shadow-modal: 0 24px 60px -20px rgba(0, 0, 0, 0.18);
}

.theme-blue-gold {
  --byd-primary: #D4A853;
  --byd-primary-600: #E0B86A;
  --byd-primary-700: #B08D3F;
  --byd-primary-foreground: #0A1020;

  --byd-background: #0A1020;
  --byd-foreground: #F8FAFC;
  --byd-card: #111A2E;
  --byd-card-foreground: #F8FAFC;
  --byd-popover: #111A2E;
  --byd-popover-foreground: #F8FAFC;
  --byd-muted: #172033;
  --byd-muted-foreground: #94A3B8;
  --byd-border: #243453;
  --byd-input: #243453;
  --byd-ring: #D4A853;

  --byd-ink: #F8FAFC;
  --byd-ink-2: #CBD5E1;
  --byd-ink-3: #94A3B8;
  --byd-line: #243453;
  --byd-surface: #111A2E;
  --byd-surface-2: #172033;

  --byd-hero-image: url('../assets/hero-theme-blue-gold.jpg');
  --byd-hero-overlay: linear-gradient(to right, rgba(10,16,32,0.88) 0%, rgba(10,16,32,0.62) 60%, rgba(10,16,32,0.38) 100%);
}

.theme-warm-gold {
  --byd-primary: #E8B923;
  --byd-primary-600: #F0C94A;
  --byd-primary-700: #B88D1A;
  --byd-primary-foreground: #1A1510;

  --byd-background: #1A1510;
  --byd-foreground: #FDF6E3;
  --byd-card: #251E16;
  --byd-card-foreground: #FDF6E3;
  --byd-popover: #251E16;
  --byd-popover-foreground: #FDF6E3;
  --byd-muted: #30261C;
  --byd-muted-foreground: #A89B85;
  --byd-border: #3D3023;
  --byd-input: #3D3023;
  --byd-ring: #E8B923;

  --byd-ink: #FDF6E3;
  --byd-ink-2: #D6C4A8;
  --byd-ink-3: #A89B85;
  --byd-line: #3D3023;
  --byd-surface: #251E16;
  --byd-surface-2: #30261C;

  --byd-hero-image: url('../assets/hero-theme-warm-gold.jpg');
  --byd-hero-overlay: linear-gradient(to right, rgba(26,21,16,0.88) 0%, rgba(26,21,16,0.60) 60%, rgba(26,21,16,0.35) 100%);
}

.theme-graphite-red {
  --byd-primary: #E63946;
  --byd-primary-600: #F04A57;
  --byd-primary-700: #B52B36;
  --byd-primary-foreground: #FFFFFF;

  --byd-background: #121212;
  --byd-foreground: #F5F5F5;
  --byd-card: #1E1E1E;
  --byd-card-foreground: #F5F5F5;
  --byd-popover: #1E1E1E;
  --byd-popover-foreground: #F5F5F5;
  --byd-muted: #2A2A2A;
  --byd-muted-foreground: #828282;
  --byd-border: #3A3A3A;
  --byd-input: #3A3A3A;
  --byd-ring: #E63946;

  --byd-ink: #F5F5F5;
  --byd-ink-2: #BDBDBD;
  --byd-ink-3: #828282;
  --byd-line: #3A3A3A;
  --byd-surface: #1E1E1E;
  --byd-surface-2: #2A2A2A;

  --byd-hero-image: url('../assets/hero-theme-graphite-red.jpg');
  --byd-hero-overlay: linear-gradient(to right, rgba(18,18,18,0.88) 0%, rgba(18,18,18,0.60) 60%, rgba(18,18,18,0.38) 100%);
}

.theme-electric-green {
  --byd-primary: #39D98A;
  --byd-primary-600: #55E69D;
  --byd-primary-700: #27A366;
  --byd-primary-foreground: #050F0A;

  --byd-background: #050F0A;
  --byd-foreground: #E6F4EA;
  --byd-card: #0B1A12;
  --byd-card-foreground: #E6F4EA;
  --byd-popover: #0B1A12;
  --byd-popover-foreground: #E6F4EA;
  --byd-muted: #112219;
  --byd-muted-foreground: #6FA682;
  --byd-border: #1A3322;
  --byd-input: #1A3322;
  --byd-ring: #39D98A;

  --byd-ink: #E6F4EA;
  --byd-ink-2: #A8D5BA;
  --byd-ink-3: #6FA682;
  --byd-line: #1A3322;
  --byd-surface: #0B1A12;
  --byd-surface-2: #112219;

  --byd-hero-image: url('../assets/hero-theme-electric-green.jpg');
  --byd-hero-overlay: linear-gradient(to right, rgba(5,15,10,0.88) 0%, rgba(5,15,10,0.62) 60%, rgba(5,15,10,0.38) 100%);
}

.theme-soft-pastel {
  --byd-primary: #C45D3A;
  --byd-primary-600: #D97852;
  --byd-primary-700: #9C462D;
  --byd-primary-foreground: #FFFFFF;

  --byd-background: #F5F3F0;
  --byd-foreground: #2D2A26;
  --byd-card: #FFFFFF;
  --byd-card-foreground: #2D2A26;
  --byd-popover: #FFFFFF;
  --byd-popover-foreground: #2D2A26;
  --byd-muted: #EDE9E4;
  --byd-muted-foreground: #8C847B;
  --byd-border: #DDD8D1;
  --byd-input: #DDD8D1;
  --byd-ring: #C45D3A;

  --byd-ink: #2D2A26;
  --byd-ink-2: #5C5751;
  --byd-ink-3: #8C847B;
  --byd-line: #DDD8D1;
  --byd-surface: #FFFFFF;
  --byd-surface-2: #EDE9E4;

  --byd-hero-image: url('../assets/hero-theme-soft-pastel.jpg');
  --byd-hero-overlay: linear-gradient(to right, rgba(245,243,240,0.92) 0%, rgba(245,243,240,0.78) 50%, rgba(245,243,240,0.40) 100%);

  --byd-shadow-overlay: 0 1px 2px rgba(45, 42, 38, 0.08), 0 1px 1px rgba(45, 42, 38, 0.05);
  --byd-shadow-popover: 0 8px 24px -8px rgba(45, 42, 38, 0.14);
  --byd-shadow-modal: 0 24px 60px -20px rgba(45, 42, 38, 0.18);
}

/* ============================================================
   Base typography
   ============================================================ */
body {
  font-family: var(--byd-font-sans);
  background-color: var(--byd-background);
  color: var(--byd-foreground);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--byd-ink);
  text-wrap: balance;
  word-break: keep-all;
}

/* Selection */
::selection {
  background-color: color-mix(in srgb, var(--byd-primary) 20%, transparent);
  color: var(--byd-ink);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--byd-ring);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Semantic token fallback classes
   (mirrors Tailwind utility names so markup keeps working
    even when the Tailwind browser build is unavailable)
   ============================================================ */
.bg-background { background-color: var(--byd-background); }
.text-background { color: var(--byd-background); }
.border-background { border-color: var(--byd-background); }
.ring-background { --tw-ring-color: var(--byd-background); }
.bg-foreground { background-color: var(--byd-foreground); }
.text-foreground { color: var(--byd-foreground); }
.border-foreground { border-color: var(--byd-foreground); }
.ring-foreground { --tw-ring-color: var(--byd-foreground); }
.bg-card { background-color: var(--byd-card); }
.text-card { color: var(--byd-card); }
.border-card { border-color: var(--byd-card); }
.ring-card { --tw-ring-color: var(--byd-card); }
.bg-card-foreground { background-color: var(--byd-card-foreground); }
.text-card-foreground { color: var(--byd-card-foreground); }
.border-card-foreground { border-color: var(--byd-card-foreground); }
.ring-card-foreground { --tw-ring-color: var(--byd-card-foreground); }
.bg-popover { background-color: var(--byd-popover); }
.text-popover { color: var(--byd-popover); }
.border-popover { border-color: var(--byd-popover); }
.ring-popover { --tw-ring-color: var(--byd-popover); }
.bg-popover-foreground { background-color: var(--byd-popover-foreground); }
.text-popover-foreground { color: var(--byd-popover-foreground); }
.border-popover-foreground { border-color: var(--byd-popover-foreground); }
.ring-popover-foreground { --tw-ring-color: var(--byd-popover-foreground); }
.bg-primary { background-color: var(--byd-primary); }
.text-primary { color: var(--byd-primary); }
.border-primary { border-color: var(--byd-primary); }
.ring-primary { --tw-ring-color: var(--byd-primary); }
.bg-primary-foreground { background-color: var(--byd-primary-foreground); }
.text-primary-foreground { color: var(--byd-primary-foreground); }
.border-primary-foreground { border-color: var(--byd-primary-foreground); }
.ring-primary-foreground { --tw-ring-color: var(--byd-primary-foreground); }
.bg-muted { background-color: var(--byd-muted); }
.text-muted { color: var(--byd-muted); }
.border-muted { border-color: var(--byd-muted); }
.ring-muted { --tw-ring-color: var(--byd-muted); }
.bg-muted-foreground { background-color: var(--byd-muted-foreground); }
.text-muted-foreground { color: var(--byd-muted-foreground); }
.border-muted-foreground { border-color: var(--byd-muted-foreground); }
.ring-muted-foreground { --tw-ring-color: var(--byd-muted-foreground); }
.bg-border { background-color: var(--byd-border); }
.text-border { color: var(--byd-border); }
.border-border { border-color: var(--byd-border); }
.ring-border { --tw-ring-color: var(--byd-border); }
.bg-input { background-color: var(--byd-input); }
.text-input { color: var(--byd-input); }
.border-input { border-color: var(--byd-input); }
.ring-input { --tw-ring-color: var(--byd-input); }
.bg-ring { background-color: var(--byd-ring); }
.text-ring { color: var(--byd-ring); }
.border-ring { border-color: var(--byd-ring); }
.ring-ring { --tw-ring-color: var(--byd-ring); }

/* ============================================================
   Utility classes
   ============================================================ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

/* ============================================================
   Critical layout
   ============================================================ */
#byd-page { overflow-x: hidden; }
#home { min-height: 100vh; min-height: 680px; }
@media (max-width: 640px) { #home { min-height: 100svh; } }
.byd-hero-bg {
  background-image: var(--byd-hero-overlay), var(--byd-hero-image);
  background-size: cover;
  background-position: center;
}
.byd-section { padding: 4rem 0; }
@media (min-width: 768px) { .byd-section { padding: 5rem 0; } }
.byd-timeline-line {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--byd-border);
}
@media (min-width: 768px) {
  .byd-timeline-line { left: 50%; transform: translateX(-50%); }
}
.byd-form-input:invalid:not(:placeholder-shown) { border-color: var(--byd-state-error); }
.byd-form-input:valid:not(:placeholder-shown) { border-color: var(--byd-state-success); }
.byd-text-error { color: var(--byd-state-error); }
.byd-shadow-1 { box-shadow: var(--byd-shadow-overlay); }
.byd-shadow-hover { transition: box-shadow 0.2s ease; }
.byd-shadow-hover:hover { box-shadow: var(--byd-shadow-popover); }
.byd-btn-primary {
  background-color: var(--byd-primary);
  color: var(--byd-primary-foreground);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.byd-btn-primary:hover { background-color: var(--byd-primary-600); transform: translateY(-1px); }
.byd-card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.byd-card-hover:hover { transform: translateY(-4px); box-shadow: var(--byd-shadow-modal); border-color: var(--byd-primary-700); }
.byd-lang-btn.active { color: var(--byd-primary); font-weight: 600; }
.byd-product-img, .byd-article-img { transition: transform 0.5s ease; }
.group:hover .byd-product-img, .group:hover .byd-article-img { transform: scale(1.05); }
.byd-carousel { overflow-x: auto; scroll-snap-type: x mandatory; }
.byd-carousel > * { scroll-snap-align: start; flex: 0 0 280px; }
@media (min-width: 640px) { .byd-carousel > * { flex: 0 0 320px; } }

/* ============================================================
   Hero text color overrides
   ------------------------------------------------------------
   Ensures hero copy stays readable against background images
   across every theme. Colors resolve via the per-theme
   --byd-foreground token. Templates may also apply
   inline style="color: var(--byd-hero-foreground)" on hero
   text for fine-grained control.
   ============================================================ */
.theme-dark #page-hero h1,
.theme-dark #page-hero p,
.theme-dark #page-hero .byd-hero-eyebrow,
.theme-dark .byd-hero h1,
.theme-dark .byd-hero p,
.theme-dark .byd-hero .byd-hero-eyebrow {
  color: var(--byd-foreground) !important;
}

.theme-light #page-hero h1,
.theme-light #page-hero p,
.theme-light #page-hero .byd-hero-eyebrow,
.theme-light .byd-hero h1,
.theme-light .byd-hero p,
.theme-light .byd-hero .byd-hero-eyebrow {
  color: var(--byd-foreground) !important;
}

.theme-blue-gold #page-hero h1,
.theme-blue-gold #page-hero p,
.theme-blue-gold #page-hero .byd-hero-eyebrow,
.theme-blue-gold .byd-hero h1,
.theme-blue-gold .byd-hero p,
.theme-blue-gold .byd-hero .byd-hero-eyebrow {
  color: var(--byd-foreground) !important;
}

.theme-warm-gold #page-hero h1,
.theme-warm-gold #page-hero p,
.theme-warm-gold #page-hero .byd-hero-eyebrow,
.theme-warm-gold .byd-hero h1,
.theme-warm-gold .byd-hero p,
.theme-warm-gold .byd-hero .byd-hero-eyebrow {
  color: var(--byd-foreground) !important;
}

.theme-graphite-red #page-hero h1,
.theme-graphite-red #page-hero p,
.theme-graphite-red #page-hero .byd-hero-eyebrow,
.theme-graphite-red .byd-hero h1,
.theme-graphite-red .byd-hero p,
.theme-graphite-red .byd-hero .byd-hero-eyebrow {
  color: var(--byd-foreground) !important;
}

.theme-electric-green #page-hero h1,
.theme-electric-green #page-hero p,
.theme-electric-green #page-hero .byd-hero-eyebrow,
.theme-electric-green .byd-hero h1,
.theme-electric-green .byd-hero p,
.theme-electric-green .byd-hero .byd-hero-eyebrow {
  color: var(--byd-foreground) !important;
}

.theme-soft-pastel #page-hero h1,
.theme-soft-pastel #page-hero p,
.theme-soft-pastel #page-hero .byd-hero-eyebrow,
.theme-soft-pastel .byd-hero h1,
.theme-soft-pastel .byd-hero p,
.theme-soft-pastel .byd-hero .byd-hero-eyebrow {
  color: var(--byd-foreground) !important;
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.pagination .page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--byd-border, #2A2E36);
  border-radius: 0.375rem;
  background: var(--byd-card, #16181D);
  color: var(--byd-muted-foreground, #8A8F99);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.pagination a.page-item:hover {
  border-color: var(--byd-primary, #D4A853);
  color: var(--byd-primary, #D4A853);
  background: var(--byd-muted, #1E2128);
}

.pagination .page-item.current {
  background: var(--byd-primary, #D4A853);
  border-color: var(--byd-primary, #D4A853);
  color: var(--byd-primary-foreground, #0A0B0D);
  font-weight: 600;
}

.pagination .page-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}