/* ==========================================================================
   Halloween Theme (scoped)
   File: css/themes/halloween.theme.css
   Scope: body.theme-halloween ...
   ========================================================================== */

/* 1) Variables — instant palette flip if your site uses CSS variables */
body.theme-halloween {
  /* Core palette */
  --brand:           #ff6a00;
  --brand-contrast:  #0d0b10;
  --accent:          #7c3aed;  /* purple */
  --accent-2:        #ff9f1c;  /* pumpkin */
  --surface:         #0f0e14;  /* deep charcoal */
  --surface-2:       #17151f;
  --text:            #f5f2ff;
  --muted:           #cbbbe7;
  --border:          #2a2336;

  /* Components (if referenced elsewhere) */
  --badge-bg:        color-mix(in srgb, var(--accent) 60%, black 40%);
  --badge-text:      #fff;
  --btn-bg:          var(--accent);
  --btn-text:        #fff;
  --link:            #ff9f1c;
  --link-hover:      #ffd166;
}

/* 2) Header / Footer */
body.theme-halloween header.site-header,
body.theme-halloween .wbc-header,
body.theme-halloween .site-header {
  background: linear-gradient(180deg, #1b1624 0%, #0f0e14 100%);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

body.theme-halloween footer.site-footer,
body.theme-halloween .wbc-footer,
body.theme-halloween .site-footer {
  background: linear-gradient(0deg, #1b1624 0%, #0f0e14 100%);
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* 3) Buttons */
body.theme-halloween .button,
body.theme-halloween button,
body.theme-halloween .wp-element-button,
body.theme-halloween .wbc-btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, black 60%);
}
body.theme-halloween .button:hover,
body.theme-halloween button:hover,
body.theme-halloween .wp-element-button:hover,
body.theme-halloween .wbc-btn:hover {
  filter: brightness(1.08);
}

/* 4) Links & accents */
body.theme-halloween a {
  color: var(--link);
}
body.theme-halloween a:hover {
  color: var(--link-hover);
}

/* 5) Badges (e.g., sale/new) */
body.theme-halloween .wbc-badge,
body.theme-halloween .badge,
body.theme-halloween .onsale {
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid color-mix(in srgb, var(--badge-bg) 60%, white 10%);
  box-shadow: 0 0 24px 0 color-mix(in srgb, var(--accent) 40%, transparent 60%);
}

/* 6) Product cards */
body.theme-halloween .product,
body.theme-halloween .products .product,
body.theme-halloween .card,
body.theme-halloween .wbc-card {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

/* 7) Search / filter bars */
body.theme-halloween .wbc-filter-bar,
body.theme-halloween .search-form,
body.theme-halloween .woocommerce-ordering {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

/* 8) Hero spotlight */
body.theme-halloween .wbc-spotlight {
  background: radial-gradient(1200px 600px at 80% -20%, rgba(124,58,237,0.25), transparent 60%),
              radial-gradient(1200px 600px at 0% 120%, rgba(255,154,0,0.20), transparent 60%),
              var(--surface);
  border: 1px solid var(--border);
}

/* 9) Mobile header subtle pop */
@media (max-width: 980px) {
  body.theme-halloween .wbc-header,
  body.theme-halloween .site-header {
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.22);
  }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}