:root,
html[data-theme="classic"] {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #64748b;
  --accent: #0f9731;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --hero-bg: #eaf3ff;
  --input-bg: #ffffff;
  --navbar-bg: #ffffff;
  --navbar-text: #0f172a;
  --footer-bg: #07111f;
  --radius: 1.15rem;
  --theme-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  --store-primary: var(--navbar-bg);
  --store-primary-soft: var(--hero-bg);
  --store-secondary: var(--primary);
  --store-secondary-dark: var(--primary-dark);
  --store-cream: color-mix(in srgb, var(--primary) 10%, #ffffff);
  --store-surface: var(--card-bg);
  --store-muted: var(--text-muted);
  --store-border: var(--border);
  --store-shadow: var(--theme-shadow);
}

html[data-theme="dark"] {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --secondary: #94a3b8;
  --accent: #0f9731;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;
  --bg: #0b0f17;
  --card-bg: #111827;
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --border: #1f2937;
  --hero-bg: #090d14;
  --input-bg: #0f172a;
  --navbar-bg: #090d14;
  --navbar-text: #f8fafc;
  --footer-bg: #06080d;
  --radius: 1.15rem;
  --theme-shadow: 0 18px 45px rgba(0, 0, 0, .35);
  --store-primary: var(--navbar-bg);
  --store-primary-soft: #101826;
  --store-secondary: var(--primary);
  --store-secondary-dark: var(--primary-dark);
  --store-cream: #162033;
  --store-surface: var(--card-bg);
  --store-muted: var(--text-muted);
  --store-border: var(--border);
  --store-shadow: var(--theme-shadow);
}

html[data-theme="kids"] {
  --primary: #ec4899;
  --primary-dark: #db2777;
  --secondary: #8b5cf6;
  --accent: #f59e0b;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;
  --bg: #fff7ed;
  --card-bg: #ffffff;
  --text: #1f2937;
  --text-muted: #6b7280;
  --border: #fde68a;
  --hero-bg: #fff1f8;
  --input-bg: #ffffff;
  --navbar-bg: #fff8e7;
  --navbar-text: #1f2937;
  --footer-bg: #211827;
  --radius: 1.65rem;
  --theme-shadow: 0 20px 45px rgba(236, 72, 153, .16);
  --store-primary: var(--navbar-bg);
  --store-primary-soft: var(--hero-bg);
  --store-secondary: var(--primary);
  --store-secondary-dark: var(--primary-dark);
  --store-cream: #fff1f8;
  --store-surface: var(--card-bg);
  --store-muted: var(--text-muted);
  --store-border: var(--border);
  --store-shadow: var(--theme-shadow);
}

body.store-body {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, #ffffff) 22rem);
  color: var(--text);
}

.store-navbar {
  background: color-mix(in srgb, var(--navbar-bg) 96%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 1080;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-nav .nav-link,
.nav-link {
  color: color-mix(in srgb, var(--navbar-text) 88%, transparent) !important;
}

.nav-link:hover,
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.navbar-toggler {
  border-color: color-mix(in srgb, var(--navbar-text) 20%, transparent);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.hero-card {
  background:
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 14rem),
    linear-gradient(135deg, var(--hero-bg), color-mix(in srgb, var(--primary) 14%, var(--hero-bg)));
  color: var(--text);
}

html[data-theme="dark"] .hero-card {
  color: var(--text);
}

html[data-theme="dark"] .hero-border-shine {
  --hero-shine-color: color-mix(in srgb, var(--primary) 72%, white);
  opacity: .9;
}

html[data-theme="dark"] .featured-product-card-frame {
  --featured-card-shine: color-mix(in srgb, var(--primary) 76%, white);
  --featured-card-shine-opacity: .66;
}

.hero-kicker,
.product-category-label {
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.hero-category-panel,
.category-pill,
.category-card,
.category-chip,
.category-filter-pill,
.product-card,
.admin-card,
.table-panel,
.form-panel,
.page-heading,
.checkout-section,
.detail-metric,
.cart-item,
.dropdown-menu,
.theme-menu {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}

.category-card:hover,
.category-chip:hover,
.category-filter-pill:hover,
.category-filter-pill.active {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg));
}

.category-card-image,
.category-card-fallback {
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 45%),
    color-mix(in srgb, var(--primary) 9%, var(--card-bg));
}

.category-card-body h3,
.category-card-body span {
  color: var(--primary);
}

.home-category-item {
  color: var(--text);
}

.home-category-item:hover {
  color: var(--primary);
}

.home-category-image-wrap {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.home-category-image {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.home-category-fallback {
  color: var(--primary);
}

.category-card-body p {
  color: var(--text-muted);
}

.product-card,
.admin-card,
.table-panel,
.form-panel,
.page-heading {
  border-radius: var(--radius);
}

.text-muted,
.small.text-muted,
.product-description,
.cart-mobile-meta {
  color: var(--text-muted) !important;
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

.form-control::placeholder {
  color: color-mix(in srgb, var(--text-muted) 75%, transparent);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  color: var(--text);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  color: var(--text);
}

.border,
.border-bottom {
  border-color: var(--border) !important;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #ffffff;
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.btn-outline-light {
  color: var(--navbar-text);
  border-color: color-mix(in srgb, var(--navbar-text) 28%, transparent);
}

.btn-outline-light:hover,
.btn-light {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
}

.btn-secondary,
.btn-outline-secondary {
  color: var(--text);
  border-color: var(--border);
  background-color: color-mix(in srgb, var(--card-bg) 85%, var(--secondary));
}

.price {
  color: var(--primary);
}

.old-price {
  color: var(--text-muted);
}

.product-badge {
  background: var(--primary);
}

.product-badge.sale {
  background: var(--warning);
}

.product-badge.success {
  background: var(--success);
}

.product-badge.muted {
  background: var(--secondary);
}

.empty-state {
  background: color-mix(in srgb, var(--primary) 9%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.footer {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 20rem),
    var(--footer-bg);
}

.footer-links a {
  color: color-mix(in srgb, #ffffff 72%, var(--primary));
}

.theme-menu {
  width: min(22rem, calc(100vw - 2rem));
  border-radius: 1rem;
  box-shadow: var(--theme-shadow);
  z-index: 1090;
}

.theme-switcher.dropdown {
  position: relative;
  z-index: 1090;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: .85rem;
  padding: .65rem .75rem;
  text-align: start;
}

.theme-option.is-selected,
.appearance-option.is-selected,
.color-preset.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--primary) 20%, transparent);
}

.theme-dot {
  width: .85rem;
  height: .85rem;
  border-radius: 999px;
  display: inline-block;
}

.theme-dot-classic {
  background: #2563eb;
}

.theme-dot-dark {
  background: #0b0f17;
}

.theme-dot-kids {
  background: #ec4899;
}

.theme-colors {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}

.color-preset {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 2px solid var(--card-bg);
  outline: 1px solid var(--border);
  background: var(--preset-color);
}

html[data-theme="kids"] .btn,
html[data-theme="kids"] .product-card,
html[data-theme="kids"] .form-control,
html[data-theme="kids"] .form-select,
html[data-theme="kids"] .cart-item {
  border-radius: 1.35rem;
}

html[data-theme="kids"] .store-hero::before {
  content: "";
  position: absolute;
  inset: 1rem;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent) 0 .16rem, transparent .18rem),
    radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent) 0 .14rem, transparent .16rem);
  background-position: 0 0, 2rem 1.5rem;
  background-size: 5rem 5rem;
  opacity: .35;
}

html[data-theme="kids"] .hero-border-shine {
  --hero-shine-color: color-mix(in srgb, var(--accent) 70%, white);
  opacity: .86;
}

html[data-theme="kids"] .featured-product-card-frame {
  --featured-card-shine: color-mix(in srgb, var(--accent) 72%, white);
  --featured-card-shine-opacity: .64;
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: color-mix(in srgb, var(--card-bg) 94%, transparent);
    border: 1px solid var(--border);
  }
}

/* Sprint 011.4 visual QA polish */
html[data-theme="dark"] {
  color-scheme: dark;
}

body.store-body .container,
main,
section,
.row {
  color: inherit;
}

.theme-menu.show {
  display: block;
}

.bg-white,
.text-bg-light {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
}

.text-dark {
  color: var(--text) !important;
}

.alert {
  border-color: var(--border);
  border-radius: var(--radius);
}

.alert-info {
  background: color-mix(in srgb, var(--info) 12%, var(--card-bg));
  color: var(--text);
}

.alert-success {
  background: color-mix(in srgb, var(--success) 14%, var(--card-bg));
  color: var(--text);
}

.alert-danger,
.validation-summary-errors {
  background: color-mix(in srgb, var(--danger) 12%, var(--card-bg));
  color: color-mix(in srgb, var(--danger) 82%, var(--text));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-radius: 1rem;
  padding: .85rem 1rem;
}

.text-danger,
.field-validation-error {
  color: color-mix(in srgb, var(--danger) 82%, var(--text)) !important;
}

.badge.bg-success {
  background-color: var(--success) !important;
  color: #ffffff !important;
}

.product-card-title,
.section-title,
.form-label,
.checkout-section h2,
.table-panel h1,
.table-panel h2,
.form-panel h1,
.form-panel h2 {
  color: var(--text);
}

.form-check-input {
  background-color: var(--input-bg);
  border-color: var(--border);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text);
}

/* Admin theme contrast hotfix */
.admin-shell {
  --admin-bg: var(--bg);
  --admin-card-bg: var(--card-bg);
  --admin-text: var(--text);
  --admin-muted: var(--text-muted);
  --admin-border: var(--border);
}

.admin-shell .admin-page,
.admin-shell .admin-page .row,
.admin-shell .admin-page section {
  color: var(--admin-text);
}

.admin-shell .section-title,
.admin-shell h1,
.admin-shell h2,
.admin-shell h3,
.admin-shell h4,
.admin-shell h5,
.admin-shell h6 {
  color: var(--admin-text);
}

.admin-shell .admin-card,
.admin-shell .table-panel,
.admin-shell .form-panel,
.admin-shell .page-heading,
.admin-shell .detail-metric,
.admin-shell .checkout-section {
  background: var(--admin-card-bg);
  color: var(--admin-text);
  border: 1px solid var(--admin-border);
  box-shadow: var(--theme-shadow);
}

.admin-shell .admin-card .text-muted,
.admin-shell .table-panel .text-muted,
.admin-shell .form-panel .text-muted,
.admin-shell .admin-page .text-muted {
  color: var(--admin-muted) !important;
}

.admin-shell .admin-stat {
  color: var(--admin-text) !important;
  text-shadow: none;
}

.admin-shell a.table-panel,
.admin-shell a.table-panel:hover,
.admin-shell a.table-panel:focus {
  color: var(--admin-text);
}

.admin-shell .table {
  --bs-table-color: var(--admin-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--admin-border);
  --bs-table-striped-color: var(--admin-text);
  --bs-table-striped-bg: color-mix(in srgb, var(--primary) 4%, transparent);
  --bs-table-hover-color: var(--admin-text);
  --bs-table-hover-bg: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--admin-text);
  border-color: var(--admin-border);
}

.admin-shell .table > :not(caption) > * > * {
  color: var(--admin-text);
  background-color: transparent;
  border-color: var(--admin-border);
}

.admin-shell .table thead th {
  color: var(--admin-text);
  border-color: var(--admin-border);
}

.admin-shell .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--admin-text);
}

.admin-shell .btn-outline-secondary {
  color: var(--admin-text);
  border-color: var(--admin-border);
  background: color-mix(in srgb, var(--admin-card-bg) 92%, var(--secondary));
}

.admin-shell .btn-outline-secondary:hover,
.admin-shell .btn-outline-secondary:focus {
  color: #ffffff;
  border-color: var(--secondary);
  background: var(--secondary);
}

.admin-shell .form-control,
.admin-shell .form-select,
.admin-shell .input-group-text {
  background-color: var(--input-bg);
  color: var(--admin-text);
  border-color: var(--admin-border);
}

.admin-shell .dropdown-menu {
  background: var(--admin-card-bg);
  color: var(--admin-text);
  border-color: var(--admin-border);
}

.admin-shell .dropdown-item {
  color: var(--admin-text);
}

.admin-shell .dropdown-item:hover,
.admin-shell .dropdown-item:focus {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--admin-text);
}

.admin-shell .dashboard-chart-card {
  background: var(--admin-card-bg);
  color: var(--admin-text);
}

.admin-shell .dashboard-chart-canvas {
  display: block;
}

.admin-shell .admin-chart-container {
  color: var(--admin-text);
}

html[data-theme="kids"] .admin-shell .dashboard-chart-card {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--admin-border));
}

.admin-shell .admin-analytics-page .admin-chart-card,
.admin-shell .admin-analytics-page .analytics-kpi-card {
  background: var(--admin-card-bg);
  color: var(--admin-text);
  border-color: var(--admin-border);
}

html[data-theme="kids"] .admin-shell .admin-analytics-page .admin-chart-card,
html[data-theme="kids"] .admin-shell .admin-analytics-page .analytics-kpi-card {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--admin-border));
}

.product-card img,
.product-cover,
.cart-item-image {
  background: color-mix(in srgb, var(--primary) 9%, var(--card-bg));
}

.product-card img {
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.product-actions .btn,
.product-actions button,
.checkout-actions .btn,
.product-detail-actions .btn,
.product-detail-actions button {
  min-height: 2.35rem;
}

html[data-theme="kids"] .btn,
html[data-theme="kids"] .product-card,
html[data-theme="kids"] .form-control,
html[data-theme="kids"] .form-select,
html[data-theme="kids"] .cart-item,
html[data-theme="kids"] .table-panel,
html[data-theme="kids"] .form-panel {
  border-radius: 1.35rem;
}

html[data-theme="kids"] .store-navbar {
  box-shadow: 0 14px 35px rgba(236, 72, 153, .12);
}

html[data-theme="kids"] .product-card {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}

html[data-theme="kids"] .home-category-image-wrap {
  background: transparent;
}

html[data-theme="kids"] .home-category-image {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  box-shadow: 0 10px 24px rgba(236, 72, 153, .12);
}

html[data-theme="dark"] .home-category-image {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .home-category-item:hover .home-category-image {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .btn-outline-danger,
html[data-theme="dark"] .btn-outline-success {
  background: transparent;
}

html[data-theme="dark"] .hero-category-panel.text-dark {
  color: var(--text) !important;
}

@media (max-width: 991.98px) {
  .store-nav-links {
    gap: .35rem;
  }

  .store-nav-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .theme-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    margin-top: .5rem;
  }
}

@media (max-width: 575.98px) {
  .theme-colors {
    justify-content: space-between;
  }

  .theme-option {
    min-height: 2.75rem;
  }

  .form-panel.p-5 {
    padding: 1.25rem !important;
  }
}

@media print {
  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .store-navbar,
  .footer,
  .theme-switcher,
  .navbar,
  .print-actions {
    display: none !important;
  }

  .form-panel,
  .table-panel,
  .product-card,
  .checkout-section,
  .panel {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    border-color: #d1d5db !important;
  }

  a {
    color: #000000 !important;
    text-decoration: none !important;
  }
}