/* ---------------------------
   Design Tokens — Cozy In WV
   "Modern Mountain" aesthetic
   Gold & Blue, dark-first
   White product cards always
---------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Layout */
  --w: 1200px;
  --w-narrow: 720px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-pill: 100px;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 150ms;
  --t-ui: 250ms;
  --t-modal: 350ms;
  --t: 150ms var(--ease);

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Topbar */
  --topbar-h: 64px;

  /* Brand constants (official WVU web-optimized) */
  --wvu-blue: #002855;
  --wvu-gold: #EEAA00;
  --wvu-coal: #1C2B39;
  --card-bg: #FFFFFF;
}

/* ─── Dark theme (DEFAULT) ─── */
html,
html[data-theme="dark"] {
  --bg: #121D28;
  --surface: #1C2B39;
  --surface-2: #243446;
  --surface-3: #2D3E52;

  --text: #E8EDF4;
  --text-heading: #F5F7FA;
  --muted: #8899AD;
  --muted-2: #5A6D82;

  --border: #2D3E52;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* Gold accent */
  --accent: #EEAA00;
  --accent-hover: #FFB81C;
  --accent-subtle: rgba(238, 170, 0, 0.12);
  --accent-text: #FFB81C;

  /* Blue secondary */
  --secondary: #4A8FD4;
  --secondary-hover: #6AA3DE;
  --secondary-subtle: rgba(74, 143, 212, 0.12);

  --berry: #FFD54F;

  --chip: rgba(255, 255, 255, 0.06);
  --chip-hover: rgba(255, 255, 255, 0.10);
  --chip-active: rgba(234, 170, 0, 0.15);

  --topbar: rgba(18, 29, 40, 0.94);
  --overlay: rgba(0, 0, 0, 0.55);

  /* Deal badges */
  --badge-discount: #EF6461;
  --badge-savings: #5CB88A;
  --badge-deal: #EAAA00;
  --badge-warehouse: #F4A261;

  color-scheme: dark;
}

/* ─── Light theme ─── */
html[data-theme="light"] {
  --bg: #F7F7F7;
  --surface: #FEFEFE;
  --surface-2: #F0F1F4;
  --surface-3: #E6E8ED;

  --text: #1A2233;
  --text-heading: #002855;
  --muted: #5A6D82;
  --muted-2: #8899AD;

  --border: #D8DFE8;
  --border-subtle: rgba(0, 0, 0, 0.05);
  --shadow: 0 8px 32px rgba(12, 20, 32, 0.08);
  --shadow-sm: 0 2px 8px rgba(12, 20, 32, 0.06);
  --shadow-hover: 0 12px 40px rgba(12, 20, 32, 0.12);

  /* Gold accent in light mode */
  --accent: #EEAA00;
  --accent-hover: #D49800;
  --accent-subtle: rgba(238, 170, 0, 0.10);
  --accent-text: #EEAA00;

  /* Blue secondary in light */
  --secondary: #002855;
  --secondary-hover: #003670;
  --secondary-subtle: rgba(0, 40, 85, 0.08);

  --berry: #002855;

  --chip: rgba(0, 40, 85, 0.04);
  --chip-hover: rgba(0, 40, 85, 0.08);
  --chip-active: rgba(0, 40, 85, 0.12);

  --topbar: rgba(244, 246, 249, 0.92);
  --overlay: rgba(0, 40, 85, 0.30);

  /* Deal badges */
  --badge-discount: #D93D42;
  --badge-savings: #2D8F5E;
  --badge-deal: #C08E00;
  --badge-warehouse: #D4820A;

  color-scheme: light;
}

/* ─── White product cards in ALL themes ─── */
.bf-card,
.dealCard,
.roundupBlock__card,
.searchResult {
  background: var(--card-bg) !important;
  color: #1A2233 !important;
}
.bf-card__title,
.bf-card__title a,
.dealCard__title,
.dealCard__title a,
.roundupBlock__cardTitle,
.roundupBlock__cardTitle a {
  color: #1A2233 !important;
}
.bf-card__brand,
.dealCard__brand,
.roundupBlock__brand {
  color: #5A6D82 !important;
}
.bf-card__price,
.dealCard__price,
.roundupBlock__price {
  color: #002855 !important;
}
.bf-card__was,
.dealCard__was,
.roundupBlock__wasPrice {
  color: #8899AD !important;
}