/* Applied when html has .dark (set by theme-init.js). Uses !important to override Tailwind CDN utilities. */

html.dark {
  color-scheme: dark;
}

html.light {
  color-scheme: light;
}

html.dark body {
  background-color: #121418 !important;
  color: #eceef4 !important;
}

html.dark .glass-panel {
  background: rgba(22, 24, 30, 0.82) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
}

html.dark .ios-shadow {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

html.dark .bg-surface {
  background-color: #121418 !important;
}

html.dark .bg-surface-container-low {
  background-color: #1c2029 !important;
}

html.dark .bg-surface-container-lowest {
  background-color: #252a35 !important;
}

html.dark .bg-surface-container {
  background-color: #22262f !important;
}

html.dark .bg-surface-container-high {
  background-color: #2c313c !important;
}

html.dark .bg-surface-container-highest {
  background-color: #323845 !important;
}

html.dark .bg-white {
  background-color: #2a2f3a !important;
}

html.dark .bg-primary\/10 {
  background-color: rgba(0, 88, 188, 0.22) !important;
}

html.dark .text-on-surface {
  color: #eceef4 !important;
}

html.dark .text-on-surface-variant {
  color: #9aa3b5 !important;
}

html.dark .text-outline {
  color: #8b94a8 !important;
}

html.dark .text-primary {
  color: #7eb6ff !important;
}

html.dark .border-outline-variant\/10,
html.dark .border-outline-variant\/15,
html.dark .border-outline-variant\/20,
html.dark .border-outline-variant\/30,
html.dark .border-outline-variant\/40,
html.dark .border-outline-variant\/5 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .border-white\/20 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .ring-outline-variant\/15,
html.dark .ring-outline-variant\/20 {
  --tw-ring-color: rgba(180, 190, 210, 0.2) !important;
}

html.dark .shadow-\[0_12px_40px_rgba\(26\,27\,31\,0\.06\)\] {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

html.dark .shadow-\[0_-8px_30px_rgba\(0\,0\,0\,0\.04\)\] {
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35) !important;
}

html.dark .hover\:bg-surface-container-low:hover {
  background-color: #2a303c !important;
}

html.dark .hover\:bg-surface-container-low\/80:hover {
  background-color: rgba(42, 48, 60, 0.8) !important;
}

html.dark .focus-within\:bg-surface-container-lowest:focus-within {
  background-color: #2d3340 !important;
}

html.dark .placeholder\:text-outline\/50::placeholder {
  color: rgba(139, 148, 168, 0.55) !important;
}

html.dark .line-through.text-outline {
  color: #6b7280 !important;
}