/* Semantic theme tokens — populated via CSS variables from Theme Engine */

:root {
  --button-primary-bg: var(--primary-600, #2563EB);
  --button-primary-text: #FFFFFF;
  --card-bg: var(--card-background, #FFFFFF);
  --header-bg: #FFFFFF;
  /* --chrome-* populated via Theme Engine inline :root block */
}

/* Light mode chrome — footer & nav use palette-tinted dark surfaces (not #111827) */
html:not(.dark) footer .bg-gray-900 {
  background-color: var(--chrome-background, #111827) !important;
}

html:not(.dark) footer .bg-gray-950 {
  background-color: var(--chrome-background-deep, #030712) !important;
}

html:not(.dark) .header .bg-gray-900 {
  background-color: var(--chrome-background, #111827) !important;
}

html:not(.dark) footer .text-gray-400 {
  color: var(--chrome-text-muted, #9ca3af) !important;
}

.dark {
  --button-primary-bg: var(--primary-600, #2563EB);
  --button-primary-text: #FFFFFF;
  --card-bg: var(--card-background, #1f2937);
  --header-bg: var(--card-background, #1f2937);
  --surface-control: color-mix(in srgb, var(--primary-color, #2563EB) 18%, var(--card-background, #1f2937) 82%);
  --surface-control-muted: color-mix(in srgb, var(--card-background, #1f2937) 42%, var(--background-color, #111827) 58%);
  --surface-control-disabled: color-mix(in srgb, var(--text-secondary, #6b7280) 22%, var(--background-color, #111827) 78%);
  --surface-control-border: color-mix(
    in srgb,
    var(--primary-color, #2563EB) 14%,
    color-mix(in srgb, var(--card-background, #374151) 72%, var(--text-secondary, #6b7280) 28%) 86%
  );
  --surface-control-hover: color-mix(in srgb, var(--primary-color, #2563EB) 28%, var(--card-background, #1f2937) 72%);
  --surface-control-hover-border: color-mix(in srgb, var(--primary-color, #2563EB) 45%, var(--card-background, #1f2937) 55%);
}

/* Dark mode surfaces — override Tailwind gray defaults with palette tokens */
html.dark body {
  background-color: var(--background-color, #111827) !important;
  color: var(--text-primary, #f4f4f5) !important;
}

html.dark .dark\:bg-gray-950,
html.dark .dark\:bg-gray-900 {
  background-color: var(--background-color, #111827) !important;
}

html.dark .dark\:bg-gray-800,
html.dark .dark\:bg-gray-700 {
  background-color: var(--card-background, #1f2937) !important;
}

/* child:dark:bg-* — product detail, cart, checkout section wrappers */
html.dark .child\:dark\:bg-gray-800:is(.dark *) > * {
  background-color: var(--card-background, #1f2937) !important;
}

html.dark .child\:dark\:bg-gray-900:is(.dark *) > *,
html.dark .dark\:child\:bg-gray-900 > *:is(.dark *) {
  background-color: var(--background-color, #111827) !important;
}

html.dark .dark\:border-gray-600,
html.dark .dark\:border-gray-700 {
  border-color: color-mix(in srgb, var(--card-background, #374151) 70%, var(--text-secondary, #6b7280) 30%) !important;
}

html.dark .dark\:text-gray-100,
html.dark .dark\:text-gray-200 {
  color: var(--text-primary, #f4f4f5) !important;
}

html.dark .dark\:text-gray-300,
html.dark .dark\:text-gray-400 {
  color: var(--text-secondary, #9ca3af) !important;
}

/* Product cards — app.css hardcodes gray-800 (#1F2937) with !important */
html.dark .product-card,
html.dark .product-card:is(.dark *) {
  background-color: var(--card-background, #1f2937) !important;
}

html.dark .product-card[data-theme-card="minimal"],
html.dark .product-card[data-theme-card="minimal"]:is(.dark *) {
  background-color: var(--card-background, var(--card-bg, #1f2937)) !important;
}

html.dark .product-card_price-wrapper:is(.dark *),
html.dark .product-card_price-wrapper {
  border-color: color-mix(in srgb, var(--card-background, #374151) 60%, var(--text-secondary, #6b7280) 40%) !important;
}

html.dark .quick-view-content,
html.dark #quick-view-modal .quick-view-content {
  background-color: var(--card-background, #1f2937) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

/* Interactive controls — carousel nav, app-border chips, variant pickers */
html.dark .slider-navigate_btn,
html.dark .slider-navigate_btn:is(.dark *) {
  background-color: var(--surface-control) !important;
  border-color: var(--surface-control-border) !important;
  color: var(--text-primary, #f3f4f6) !important;
}

html.dark .slider-navigate_btn:hover,
html.dark .slider-navigate_btn:hover:is(.dark *) {
  background-color: var(--surface-control-hover) !important;
  border-color: var(--surface-control-hover-border) !important;
  color: var(--primary-color) !important;
}

html.dark .swiper-pagination-wrapper:is(.dark *) {
  background-color: var(--background-color, #111827) !important;
}

html.dark .app-border,
html.dark .app-border:is(.dark *) {
  border-color: var(--surface-control-border) !important;
}

html.dark .child\:app-border > *:is(.dark *) {
  border-color: var(--surface-control-border) !important;
}

html.dark .app-hover:hover,
html.dark .app-hover:hover:is(.dark *) {
  background-color: var(--surface-control-hover) !important;
  border-color: var(--surface-control-hover-border) !important;
  color: var(--primary-color) !important;
}

html.dark .variation-select-btn:not(.selected):not(:disabled) {
  background-color: var(--surface-control) !important;
  border-color: var(--surface-control-border) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html.dark .variation-select-btn:not(.selected):not(:disabled):hover {
  background-color: var(--surface-control-hover) !important;
  border-color: var(--surface-control-hover-border) !important;
  color: var(--text-primary, #f3f4f6) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 22%, transparent 78%) !important;
}

html.dark .variation-select-btn:disabled {
  background-color: var(--surface-control-disabled) !important;
  border-color: var(--surface-control-border) !important;
  color: var(--text-secondary, #9ca3af) !important;
}

html.dark .variation-select-btn.selected {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-300)) !important;
  border-color: var(--primary-500) !important;
  color: #fff !important;
}

html.dark .variation-select-btn.selected span {
  color: #fff !important;
}