/* Karexi storefront theme — dark default (:root), light via html.light */
:root {
  color-scheme: dark;
  --bg: 8 8 16;
  --fg: 245 245 250;
  --card: 18 18 32;
  --card-fg: 245 245 250;
  --muted: 30 30 45;
  --muted-fg: 168 168 188;
  --border: 38 38 58;
}

html.light {
  color-scheme: light;
  --bg: 250 250 252;
  --fg: 14 14 22;
  --card: 255 255 255;
  --card-fg: 14 14 22;
  --muted: 240 240 245;
  --muted-fg: 90 90 110;
  --border: 225 225 235;
}

html.light body {
  background-image:
    radial-gradient(at 15% 8%, rgba(124, 58, 237, 0.1) 0px, transparent 40%),
    radial-gradient(at 85% 0%, rgba(34, 211, 238, 0.08) 0px, transparent 45%),
    radial-gradient(at 60% 95%, rgba(217, 70, 239, 0.06) 0px, transparent 50%);
}

html.light .grid-pattern {
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

html.light .glass,
html.light .glass-strong {
  border-color: rgb(var(--border) / 0.85) !important;
  background-color: rgb(var(--card) / 0.88) !important;
  box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.08);
}

html.light .bg-white\/5 { background-color: rgb(0 0 0 / 0.04) !important; }
html.light .bg-white\/10 { background-color: rgb(0 0 0 / 0.06) !important; }
html.light .bg-white\/\[0\.02\] { background-color: rgb(0 0 0 / 0.02) !important; }
html.light .bg-white\/\[0\.03\] { background-color: rgb(0 0 0 / 0.03) !important; }
html.light .bg-white\/\[0\.04\] { background-color: rgb(0 0 0 / 0.04) !important; }
html.light .border-white\/5 { border-color: rgb(0 0 0 / 0.06) !important; }
html.light .border-white\/10 { border-color: rgb(0 0 0 / 0.1) !important; }
html.light .border-white\/15 { border-color: rgb(0 0 0 / 0.12) !important; }
html.light .border-white\/20 { border-color: rgb(0 0 0 / 0.14) !important; }
html.light .hover\:bg-white\/5:hover { background-color: rgb(0 0 0 / 0.05) !important; }
html.light .hover\:bg-white\/10:hover { background-color: rgb(0 0 0 / 0.07) !important; }
html.light .hover\:border-white\/20:hover { border-color: rgb(0 0 0 / 0.16) !important; }

html.light #mobile-menu .bg-black\/70 {
  background-color: rgb(0 0 0 / 0.35) !important;
}

html.light .text-foreground\/80 {
  color: rgb(var(--fg) / 0.85);
}

html.light .shadow-xl {
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.12);
}

html.light .bg-gradient-mesh {
  opacity: 0.55;
}

html.light ::selection {
  background-color: rgba(99, 102, 241, 0.25);
  color: rgb(var(--fg));
}