:root {
  color-scheme: dark;
}

html.light {
  --as-bg: #f6f8fb;
  --as-panel: #ffffff;
  --as-panel-soft: #f8fafc;
  --as-panel-muted: #eef2f7;
  --as-border: rgba(148, 163, 184, 0.32);
  --as-border-strong: rgba(100, 116, 139, 0.28);
  --as-text-strong: #0f172a;
  --as-text: #334155;
  --as-text-muted: #64748b;
  --as-text-faint: #94a3b8;
  color-scheme: light;
  background: var(--as-bg);
}

html.light body {
  background-color: var(--as-bg) !important;
  color: var(--as-text-muted) !important;
}

html.light ::selection {
  background: rgba(52, 211, 153, 0.22);
  color: var(--as-text-strong);
}

html.light ::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.75);
}

html.light ::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.32);
}

html.light ::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.48);
}

html.light * {
  scrollbar-color: rgba(100, 116, 139, 0.32) rgba(226, 232, 240, 0.75);
}

html.light input,
html.light textarea,
html.light select {
  color: var(--as-text-strong) !important;
}

html.light [class~="placeholder:text-zinc-600"]::placeholder,
html.light [class~="placeholder:text-zinc-700"]::placeholder {
  color: var(--as-text-faint) !important;
  opacity: 1;
}

html.light [class~="bg-surface-950"] {
  background-color: var(--as-bg) !important;
}

html.light [class~="bg-surface-950/20"],
html.light [class~="bg-surface-950/30"],
html.light [class~="bg-surface-950/40"],
html.light [class~="bg-surface-950/50"],
html.light [class~="bg-surface-950/60"],
html.light [class~="bg-surface-950/80"],
html.light [class~="focus:bg-surface-950/80"]:focus {
  background-color: rgba(255, 255, 255, 0.92) !important;
}

html.light [class~="bg-surface-900"],
html.light [class~="bg-surface-900/20"],
html.light [class~="bg-surface-900/30"],
html.light [class~="bg-surface-900/40"],
html.light [class~="bg-surface-900/50"],
html.light [class~="bg-surface-900/60"] {
  background-color: var(--as-panel) !important;
}

html.light [class~="bg-surface-800"],
html.light [class~="hover:bg-surface-800/60"]:hover {
  background-color: var(--as-panel-muted) !important;
}

html.light [class~="bg-zinc-950"],
html.light [class~="bg-zinc-950/40"],
html.light [class~="bg-zinc-950/50"],
html.light [class~="hover:bg-zinc-950/70"]:hover {
  background-color: var(--as-panel) !important;
}

html.light [class~="bg-zinc-900"],
html.light [class~="bg-zinc-800"],
html.light [class~="bg-zinc-800/40"],
html.light [class~="hover:bg-zinc-800"]:hover,
html.light [class~="hover:bg-zinc-700"]:hover {
  background-color: var(--as-panel-muted) !important;
}

html.light [class~="bg-white/5"],
html.light [class~="hover:bg-white/5"]:hover,
html.light [class~="hover:bg-white/[0.01]"]:hover {
  background-color: rgba(15, 23, 42, 0.045) !important;
}

html.light [class~="border-white"],
html.light [class~="border-white/5"],
html.light [class~="border-white/10"] {
  border-color: var(--as-border) !important;
}

html.light [class~="ring-white/5"],
html.light [class~="ring-white/10"] {
  --tw-ring-color: var(--as-border) !important;
}

html.light [class~="text-zinc-100"],
html.light [class~="text-zinc-150"],
html.light [class~="text-zinc-200"],
html.light [class~="text-zinc-250"],
html.light [class~="hover:text-zinc-100"]:hover,
html.light [class~="hover:text-zinc-200"]:hover {
  color: var(--as-text-strong) !important;
}

html.light [class~="text-zinc-300"],
html.light [class~="text-zinc-350"],
html.light [class~="hover:text-zinc-300"]:hover {
  color: var(--as-text) !important;
}

html.light [class~="text-zinc-400"],
html.light [class~="hover:text-zinc-400"]:hover {
  color: #475569 !important;
}

html.light [class~="text-zinc-500"],
html.light [class~="text-zinc-550"],
html.light [class~="text-zinc-555"],
html.light [class~="hover:text-zinc-500"]:hover {
  color: var(--as-text-muted) !important;
}

html.light [class~="text-zinc-600"],
html.light [class~="text-zinc-650"],
html.light [class~="text-zinc-700"],
html.light [class~="text-zinc-750"] {
  color: var(--as-text-faint) !important;
}

html.light [class~="text-zinc-950"],
html.light [class~="fill-zinc-950"],
html.light [class~="fill-surface-950"] {
  color: #052e1b !important;
  fill: #052e1b !important;
}

html.light [class~="shadow-xl"],
html.light [class~="shadow-2xl"] {
  --tw-shadow-color: rgba(15, 23, 42, 0.08) !important;
  --tw-shadow: 0 18px 48px rgba(15, 23, 42, 0.08) !important;
  --tw-shadow-colored: 0 18px 48px var(--tw-shadow-color) !important;
}

html.light [data-theme-toggle] {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}