/* Force dark theme via data-theme attribute */
html[data-theme="dark"] {
  --lch-black: 100% 0 0;
  --lch-white: 0% 0 0;
  --lch-gray: 25.2% 0 0;
  --lch-gray-dark: 30.12% 0 0;
  --lch-gray-darker: 44.95% 0 0;
  --lch-gray-darkest: 64.95% 0 0;
  --lch-almost-black: 85% 0 0;
  --lch-blue: 72.25% 0.16 248;
  --lch-blue-light: 28.11% 0.053 248;
  --lch-blue-dark: 42.25% 0.07 248;
  --lch-red: 73.8% 0.184 29.18;
  --lch-red-light: 28% 0.05 20;
  --lch-green: 75% 0.21 141.89;
  --lch-purple: 70% 0.32 282;

  /* Tailwind color utilities (must mirror @media prefers-color-scheme: dark) */
  --background: oklch(0% 0 0);
  --foreground: oklch(98.5% 0 0);
  --primary: oklch(92.2% 0 0);
  --primary-foreground: oklch(20.5% 0 0);
  --secondary: oklch(26.9% 0 0);
  --secondary-foreground: oklch(98.5% 0 0);
  --accent: oklch(26.9% 0 0);
  --accent-foreground: oklch(98.5% 0 0);
  --muted: oklch(26.9% 0 0);
  --muted-foreground: oklch(70.8% 0 0);
  --destructive: oklch(70.4% 0.191 22.216);
  --input: oklch(100% 0 0 / 15%);
  --ring: oklch(55.6% 0 0);
  --border: oklch(1 0 0 / 10%);
  --control-border: #555;
  --popover: oklch(0% 0 0);
  --popover-foreground: oklch(98.5% 0 0);
}

html[data-theme="dark"] .colorize--white {
  filter: invert(0%);
}

html[data-theme="dark"] .colorize--black {
  filter: invert(100%);
}

html[data-theme="dark"] .btn:where(:has(img):not(.avatar)) img:not([class]) {
  filter: invert(100%);
}

html[data-theme="dark"] .btn:has(input:checked) img {
  filter: invert(0);
}

html[data-theme="dark"] .btn--reversed img:not(.avatar),
html[data-theme="dark"] .btn--negative img:not(.avatar) {
  filter: invert(0%);
}

html[data-theme="dark"] .shadow {
  box-shadow:
    0 0 0 1px oklch(var(--lch-always-black) / 0.42),
    0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
    0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
    0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
    0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
    0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
}

/* Force light theme via data-theme attribute */
html[data-theme="light"] {
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 96% 0.005 96;
  --lch-gray-dark: 92% 0.005 96;
  --lch-gray-darker: 75% 0.005 96;
  --lch-gray-darkest: 65% 0.005 96;
  --lch-almost-black: 35% 0.005 96;
  --lch-blue: 54% 0.23 255;
  --lch-blue-light: 95% 0.03 255;
  --lch-blue-dark: 80% 0.08 255;
  --lch-red: 51% 0.2 31;
  --lch-red-light: 98% 0.08 22;
  --lch-green: 65.59% 0.234 142.49;
  --lch-purple: 45% 0.32 282;

  /* Tailwind color utilities (must mirror :root light defaults) */
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);
  --primary: oklch(20.5% 0 0);
  --primary-foreground: oklch(98.5% 0 0);
  --secondary: oklch(97% 0 0);
  --secondary-foreground: oklch(20.5% 0 0);
  --accent: oklch(97% 0 0);
  --accent-foreground: oklch(20.5% 0 0);
  --muted: oklch(97% 0 0);
  --muted-foreground: oklch(55.6% 0 0);
  --destructive: oklch(57.7% 0.245 27.325);
  --input: oklch(92.2% 0 0);
  --ring: oklch(70.8% 0 0);
  --border: var(--color-border);
  --control-border: #b1adae;
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(14.5% 0 0);
}

html[data-theme="light"] .colorize--white {
  filter: invert(100%);
}

html[data-theme="light"] .colorize--black {
  filter: invert(0%);
}

html[data-theme="light"] .btn:where(:has(img):not(.avatar)) img:not([class]) {
  filter: invert(0);
}

html[data-theme="light"] .btn:has(input:checked) img {
  filter: invert(100%);
}

html[data-theme="light"] .btn--reversed img:not(.avatar),
html[data-theme="light"] .btn--negative img:not(.avatar) {
  filter: invert(100%);
}

/* Override hardcoded #000 in overrides.css for library nav.
   Only matches V2 pages (application layout has data-theme, inertia_app does not). */
html[data-theme] body.library-collapsed #nav {
  background-color: oklch(var(--lch-white));
}

html[data-theme] body.library-collapsed #nav:has(.btn--faux)::before {
  background-color: oklch(var(--lch-white));
}

/* Theme picker segmented control */
.theme-picker {
  display: flex;
  background-color: var(--color-border);
  border-radius: 9999px;
  padding: 0.25em;
  gap: 0.2em;
}

.theme-picker__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-picker__label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.6em 1em;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  color: var(--color-border-darkest);
  user-select: none;
  white-space: nowrap;
}

.theme-picker__input:checked + .theme-picker__label {
  background-color: var(--color-bg);
  color: var(--color-text);
  box-shadow:
    0 1px 3px oklch(var(--lch-always-black) / 0.08),
    0 1px 2px oklch(var(--lch-always-black) / 0.06);
}

.theme-picker__icon {
  font-size: 1em;
  line-height: 1;
}

@media (any-hover: hover) {
  .theme-picker__input:not(:checked) + .theme-picker__label:hover {
    background-color: var(--color-border-dark);
  }
}