:root {
  --theme-canvas: #08050c;
  --theme-surface: #121018;
  --theme-surface-raised: #1a1520;
  --theme-ink: #f8f6ff;
  --theme-muted: #aba6ba;
  --theme-line: rgba(255, 255, 255, 0.12);
  --theme-accent: #8b5cf6;
  --theme-yellow: #facc15;
}

html[data-theme="light"] {
  --theme-canvas: #f7f2e8;
  --theme-surface: #fffaf1;
  --theme-surface-raised: #ffffff;
  --theme-ink: #241c2b;
  --theme-muted: #6c6271;
  --theme-line: rgba(61, 44, 69, 0.16);
  --theme-accent: #6d28d9;
}

html,
body {
  background: var(--theme-canvas);
}

.theme-ready body,
.theme-ready nav,
.theme-ready section,
.theme-ready footer,
.theme-ready form,
.theme-ready article,
.theme-ready input,
.theme-ready select,
.theme-ready textarea {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 240ms;
  transition-timing-function: ease;
}

.theme-toggle {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: 10000;
  min-width: 124px;
  height: 48px;
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface-raised) 88%, transparent);
  color: var(--theme-ink);
  box-shadow: 0 14px 38px rgba(25, 12, 34, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
  isolation: isolate;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 30px;
  height: 30px;
  left: 7px;
  border-radius: 50%;
  background: var(--theme-yellow);
  box-shadow: 0 5px 14px rgba(250, 204, 21, 0.22);
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1), background-color 240ms ease;
}

.theme-toggle[data-active-theme="dark"]::before {
  transform: translateX(76px);
  background: var(--theme-accent);
  box-shadow: 0 5px 16px rgba(139, 92, 246, 0.32);
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(25, 12, 34, 0.28);
}

.theme-toggle:active { transform: translateY(0) scale(.98); }
.theme-toggle:focus-visible { outline: 3px solid var(--theme-yellow); outline-offset: 4px; }
.theme-toggle__label { font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.theme-toggle__icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--theme-muted); }
.theme-toggle__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle[data-active-theme="light"] .theme-toggle__icon--sun { color: #241c2b; }
.theme-toggle[data-active-theme="dark"] .theme-toggle__icon--moon { color: #ffffff; }

html[data-theme="light"] body,
html[data-theme="light"] #root {
  background: var(--theme-canvas);
  color: var(--theme-ink);
}

html[data-theme="light"] header nav,
html[data-theme="light"] header > div[class*="bg-black/95"] {
  background: rgba(255, 250, 241, .9) !important;
  border-color: rgba(109, 40, 217, .16) !important;
  box-shadow: 0 10px 30px rgba(67, 44, 77, .1) !important;
}

html[data-theme="light"] header nav [class~="text-white"],
html[data-theme="light"] header nav [class~="text-gray-300"],
html[data-theme="light"] header > div[class*="bg-black/95"] [class~="text-gray-300"] {
  color: #35293c !important;
}

html[data-theme="light"] [class~="bg-black"][class~="py-12"] {
  background: #f3ebdd !important;
}

html[data-theme="light"] [class~="bg-black"][class~="py-12"] > .container > [class*="text-white"] {
  color: var(--theme-ink) !important;
}

html[data-theme="light"] [class~="bg-black"][class~="py-12"] > .container > [class*="text-white"] [class~="text-gray-400"] {
  color: var(--theme-muted) !important;
}

html[data-theme="light"] #about {
  background: #fffaf1 !important;
  border-color: rgba(109, 40, 217, .14) !important;
}

html[data-theme="light"] #about [class*="bg-black/80"] {
  background: rgba(255, 255, 255, .76) !important;
  border-color: rgba(109, 40, 217, .15) !important;
  box-shadow: 0 12px 30px rgba(67, 44, 77, .09) !important;
}

html[data-theme="light"] #about h3[class~="text-white"],
html[data-theme="light"] #products h2[class~="text-white"],
html[data-theme="light"] #products h3[class~="text-white"] {
  color: var(--theme-ink) !important;
}

html[data-theme="light"] #about [class~="text-gray-400"],
html[data-theme="light"] #products [class~="text-gray-400"] {
  color: var(--theme-muted) !important;
}

html[data-theme="light"] #products {
  background: linear-gradient(180deg, #eee4f4 0%, #f8f2e9 100%) !important;
}

html[data-theme="light"] #products [class*="bg-black/80"] {
  background: rgba(255, 255, 255, .84) !important;
  border-color: rgba(109, 40, 217, .16) !important;
  box-shadow: 0 15px 34px rgba(67, 44, 77, .12) !important;
}

html[data-theme="light"] #products [class*="bg-white/5"] {
  background: rgba(109, 40, 217, .05) !important;
  border-color: rgba(109, 40, 217, .1) !important;
}

html[data-theme="light"] footer#contact {
  background: #eee5f3 !important;
  color: var(--theme-ink);
}

html[data-theme="light"] footer#contact [class~="text-white"] {
  color: var(--theme-ink) !important;
}

html[data-theme="light"] footer#contact [class~="text-gray-400"],
html[data-theme="light"] footer#contact [class~="text-gray-500"] {
  color: var(--theme-muted) !important;
}

html[data-theme="light"] footer#contact [class*="border-purple-900"] {
  border-color: rgba(109, 40, 217, .16) !important;
}

html[data-theme="light"] [class*="min-h-screen"][class*="bg-black"] {
  background: linear-gradient(180deg, #f7f2e8, #eee5f3) !important;
  color: #504555 !important;
}

html[data-theme="light"] [class*="min-h-screen"][class*="bg-black"] > [class*="bg-gray-900"] {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(109, 40, 217, .16) !important;
  box-shadow: 0 24px 60px rgba(67, 44, 77, .12) !important;
}

html[data-theme="light"] [class*="min-h-screen"][class*="bg-black"] [class~="text-white"] {
  color: var(--theme-ink) !important;
}

html[data-theme="light"] [class*="min-h-screen"][class*="bg-black"] [class~="text-gray-400"] {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .reviews-home-cta {
  background: #100b15;
  color: #f8f6ff;
}

html[data-theme="dark"] .reviews-home-copy p { color: #b4aabd; }
html[data-theme="dark"] .reviews-home-button:focus-visible { outline-color: #f8f6ff; }

html[data-theme="light"] {
  --ink: #241c2b;
  --muted: #6c6271;
  --night: #f7f2e8;
  --panel: #fffaf1;
  --line: rgba(61, 44, 69, .16);
  background: var(--night);
  color: var(--ink);
}

html[data-theme="light"] .review-hero::after { background: rgba(139, 92, 246, .13); }

html[data-theme="light"] .review-form {
  background: linear-gradient(155deg, rgba(255,255,255,.92), rgba(255,250,241,.7));
  border-color: rgba(61, 44, 69, .14);
  box-shadow: 30px 30px 0 rgba(109,40,217,.12), 0 30px 80px rgba(67,44,77,.12);
}

html[data-theme="light"] .review-form > label:not(.purchase-check) { color: #504555; }
html[data-theme="light"] .review-form input[type="text"],
html[data-theme="light"] .review-form select,
html[data-theme="light"] .review-form textarea {
  background: rgba(255,255,255,.82);
  color: var(--ink);
}
html[data-theme="light"] .review-form option,
html[data-theme="light"] .review-form optgroup { background: #fffaf1; }
html[data-theme="light"] .rating-picker label { color: #b8aeb9; }
html[data-theme="light"] .character-count { color: #766d7d; }

html[data-theme="dark"] .reviews-section {
  background: #100b15;
  color: #f8f6ff;
}

html[data-theme="dark"] .section-heading .eyebrow { color: #c4a5fd; }
html[data-theme="dark"] .review-count { border-color: rgba(255,255,255,.16); }
html[data-theme="dark"] .review-card {
  background: #18121f;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}
html[data-theme="dark"] .product-pill { background: rgba(139,92,246,.16); color: #c4b5fd; }
html[data-theme="dark"] .review-copy { color: #d0c7d4; }
html[data-theme="dark"] .review-meta { border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .review-meta span,
html[data-theme="dark"] .review-meta time,
html[data-theme="dark"] .empty-state p { color: #a99ead; }
html[data-theme="dark"] .empty-state { border-color: rgba(255,255,255,.18); }
html[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #18121f 25%, #251d2d 50%, #18121f 75%);
  background-size: 200% 100%;
}

@media (max-width: 640px) {
  .theme-toggle {
    min-width: 112px;
    height: 44px;
    grid-template-columns: 28px 1fr 28px;
    padding: 6px;
  }
  .theme-toggle::before { width: 28px; height: 28px; left: 6px; }
  .theme-toggle[data-active-theme="dark"]::before { transform: translateX(68px); }
  .theme-toggle__icon { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-ready body,
  .theme-ready nav,
  .theme-ready section,
  .theme-ready footer,
  .theme-ready form,
  .theme-ready article,
  .theme-ready input,
  .theme-ready select,
  .theme-ready textarea,
  .theme-toggle,
  .theme-toggle::before {
    transition: none !important;
  }
}