/* Um valor por token, com os dois temas dentro. Antes cada um era escrito nos blocos de claro e
 * de escuro, e o automatico nao alcancava nenhum dos dois: no escuro o fundo saia branco. */
:root {
  color-scheme: light dark;

  --cs-note: light-dark(oklch(52% 0.13 288), oklch(78% 0.10 288));
  --cs-note-soft: light-dark(oklch(96% 0.025 288), oklch(26% 0.045 288));
  --cs-note-border: light-dark(oklch(52% 0.13 288), oklch(58% 0.10 288));
  --cs-pdf-action: light-dark(oklch(0.96 0.025 131), oklch(0.3 0.045 131));
  --cs-pdf-action-hover: light-dark(oklch(0.91 0.055 131), oklch(0.36 0.065 131));

  --background: light-dark(oklch(100% 0 0), oklch(17% 0.012 145));
  --foreground: light-dark(oklch(14.5% 0 0), oklch(96% 0.004 145));
  --primary: light-dark(oklch(20.5% 0 0), oklch(92% 0.005 145));
  --primary-foreground: light-dark(oklch(98.5% 0 0), oklch(19% 0.012 145));
  --secondary: light-dark(oklch(97% 0 0), oklch(27% 0.010 145));
  --secondary-foreground: light-dark(oklch(20.5% 0 0), oklch(96% 0.004 145));
  --muted: light-dark(oklch(97% 0 0), oklch(27% 0.010 145));
  --muted-foreground: light-dark(oklch(55.6% 0 0), oklch(71% 0.006 145));
  --destructive: light-dark(oklch(57.7% 0.245 27.325), oklch(70.4% 0.191 22.216));
  --input: light-dark(oklch(92.2% 0 0), oklch(100% 0 0 / 15%));
  --ring: light-dark(oklch(70.8% 0 0), oklch(56% 0.008 145));
  --border: light-dark(var(--color-border), oklch(1 0 0 / 10%));
  --control-border: light-dark(#b1adae, #555);
  --popover: light-dark(oklch(100% 0 0), oklch(20% 0.012 145));
  --popover-foreground: light-dark(oklch(14.5% 0 0), oklch(96% 0.004 145));

  --cs-float-shadow: light-dark(oklch(25% 0.02 145 / 18%), oklch(0% 0 0 / 55%));
  --cs-float-hover: light-dark(oklch(95.5% 0.008 145), oklch(28% 0.012 145));
  --cs-float-divider: light-dark(oklch(91% 0.006 145), oklch(32% 0.01 145));
}

/* A escolha da pessoa entra por aqui, e so' por aqui: quem nao escolheu segue o sistema. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] {
  --lch-black: 96% 0.004 145;
  --lch-white: 17% 0.012 145;
  --lch-gray: 24% 0.010 145;
  --lch-gray-dark: 29% 0.010 145;
  --lch-gray-darker: 43% 0.008 145;
  --lch-gray-darkest: 63% 0.006 145;
  --lch-almost-black: 85% 0.005 145;
  --lch-accent: 72% 0.12 131;
  --lch-accent-light: 27% 0.035 131;
  --lch-accent-dark: 42% 0.06 131;
  --lch-red: 73.8% 0.184 29.18;
  --lch-red-light: 28% 0.05 20;
  --lch-primary: 75% 0.14 131;
  --lch-purple: 70% 0.32 282;
}

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="light"] {
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 96% 0.004 131;
  --lch-gray-dark: 92% 0.004 131;
  --lch-gray-darker: 75% 0.004 131;
  --lch-gray-darkest: 65% 0.004 131;
  --lch-almost-black: 35% 0.006 131;
  --lch-accent: 55% 0.12 131;
  --lch-accent-light: 95% 0.025 131;
  --lch-accent-dark: 78% 0.07 131;
  --lch-red: 51% 0.2 31;
  --lch-red-light: 98% 0.08 22;
  --lch-primary: 55% 0.125 131;
  --lch-purple: 45% 0.32 282;
}

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%);
}

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 {
  display: flex;
  background-color: var(--bg-subtle);
  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(--txt-muted);
  user-select: none;
  white-space: nowrap;
}

.theme-picker__input:checked + .theme-picker__label {
  background: oklch(from var(--color-positive) l c h / 0.1);
  color: var(--color-positive);
}

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

@media (any-hover: hover) {
  .theme-picker__input:not(:checked) + .theme-picker__label:hover {
    background: oklch(from var(--color-positive) l c h / 0.05);
  }
}