/* Theme overrides are kept in a public stylesheet so Vite serves them unchanged. */
html[data-theme='dark'] {
  color-scheme: dark;
  background: #101010;
}

html[data-theme='dark'] body,
html[data-theme='dark'] .app-shell {
  background-color: #101010;
  color: #f5f5f5;
}

html[data-theme='dark'] .bg-white {
  background-color: #1b1b1b;
}

html[data-theme='dark'] .bg-neutral-50,
html[data-theme='dark'] .bg-slate-50 {
  background-color: #232323;
}

html[data-theme='dark'] .bg-neutral-100 {
  background-color: #2c2c2c;
}

html[data-theme='dark'] .bg-neutral-950 {
  background-color: #f5f5f5;
}

html[data-theme='dark'] .bg-neutral-950.text-white {
  color: #111111;
}

html[data-theme='dark'] [class~='bg-white/90'] {
  background-color: rgb(27 27 27 / 0.9);
}

html[data-theme='dark'] [class~='bg-neutral-950/55'] {
  background-color: rgb(245 245 245 / 0.55);
}

html[data-theme='dark'] .text-neutral-950,
html[data-theme='dark'] .text-neutral-900 {
  color: #f5f5f5;
}

html[data-theme='dark'] .text-neutral-700 {
  color: #d4d4d4;
}

html[data-theme='dark'] .text-neutral-600 {
  color: #b5b5b5;
}

html[data-theme='dark'] .text-neutral-500 {
  color: #929292;
}

html[data-theme='dark'] .text-neutral-400 {
  color: #777777;
}

html[data-theme='dark'] .text-neutral-300 {
  color: #d0d0d0;
}

html[data-theme='dark'] .text-slate-950 {
  color: #f8fafc;
}

html[data-theme='dark'] .text-slate-800 {
  color: #e2e8f0;
}

html[data-theme='dark'] .text-slate-700 {
  color: #cbd5e1;
}

html[data-theme='dark'] .text-slate-600 {
  color: #aeb8c4;
}

html[data-theme='dark'] .text-slate-500 {
  color: #8994a3;
}

html[data-theme='dark'] .text-rose-700 {
  color: #fb7185;
}

html[data-theme='dark'] .text-amber-700 {
  color: #fbbf24;
}

html[data-theme='dark'] .text-emerald-700 {
  color: #34d399;
}

html[data-theme='dark'] .border-neutral-200 {
  border-color: #393939;
}

html[data-theme='dark'] .border-neutral-300 {
  border-color: #4b4b4b;
}

html[data-theme='dark'] .border-neutral-800 {
  border-color: #555555;
}

html[data-theme='dark'] .border-neutral-950 {
  border-color: #f5f5f5;
}

html[data-theme='dark'] .border-slate-200 {
  border-color: #3b424c;
}

html[data-theme='dark'] .border-slate-300 {
  border-color: #525d6b;
}

html[data-theme='dark'] [class~='hover:bg-white']:hover {
  background-color: #2d2d2d;
}

html[data-theme='dark'] [class~='hover:bg-neutral-100']:hover {
  background-color: #343434;
}

html[data-theme='dark'] [class~='hover:bg-neutral-800']:hover {
  background-color: #dedede;
  color: #111111;
}

html[data-theme='dark'] [class~='hover:border-neutral-950']:hover {
  border-color: #f5f5f5;
}

html[data-theme='dark'] [class~='hover:text-neutral-950']:hover {
  color: #f5f5f5;
}

html[data-theme='dark'] [class~='focus:border-neutral-950']:focus {
  border-color: #f5f5f5;
}

html[data-theme='dark'] [class~='focus:ring-neutral-200']:focus {
  --tw-ring-color: #4b4b4b;
}

html[data-theme='dark'] input[type='range'],
html[data-theme='dark'] .accent-neutral-950 {
  accent-color: #f5f5f5;
}

html[data-theme='dark'] input::placeholder {
  color: #858585;
}

html[data-theme='dark'] .focus-stage {
  background-color: #292929;
  background-image: linear-gradient(45deg, #353535 25%, transparent 25%), linear-gradient(-45deg, #353535 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #353535 75%), linear-gradient(-45deg, transparent 75%, #353535 75%);
}

html[data-theme='dark'] .shadow-neutral-200,
html[data-theme='dark'] .shadow-neutral-300 {
  --tw-shadow-color: rgb(0 0 0 / 0.45);
}

html[data-theme='dark'] button:focus-visible,
html[data-theme='dark'] input:focus-visible,
html[data-theme='dark'] select:focus-visible {
  outline-color: #f5f5f5;
}

.theme-toggle {
  border-color: #d4d4d4;
  background: #ffffff;
  color: #171717;
  box-shadow: 0 8px 20px rgb(15 23 42 / 0.08);
}

.theme-toggle:hover {
  border-color: #0a0a0a;
  background: #fafafa;
}

.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-theme='dark'] .theme-toggle {
  border-color: #494949;
  background: #1b1b1b;
  color: #f5f5f5;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.28);
}

html[data-theme='dark'] .theme-toggle:hover {
  border-color: #f5f5f5;
  background: #2d2d2d;
}

html[data-theme='dark'] ::selection {
  background: #f5f5f5;
  color: #111111;
}

/* App brand in the top toolbar, opposite the theme toggle. */
.app-shell > div > .flex.items-center.justify-end:first-child {
  justify-content: space-between;
}

.app-shell > div > .flex.items-center.justify-end:first-child::before {
  content: 'Crop';
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: currentColor;
}