html {
  --border-color: #eee;
  --theme-color: var(--auto-theme-color, theme("colors.orange.500"));
  --hover-color: var(--auto-hover-color, theme("colors.zinc.100"));
  --header-height: auto;
  /* Accent color for form controls */
  accent-color: var(--theme-color);

  /* make app like native app in mobile */
  -webkit-tap-highlight-color: transparent;
  /*  for firefox */
  scrollbar-color: var(--theme-color) transparent;
  scrollbar-width: thin;
}

html.dark {
  --border-color: #333;
  --theme-color: var(--auto-theme-color, theme("colors.orange.600"));
}

html.dark body {
  --tw-color-zinc-400: var(--tw-color-zinc-500);
  --tw-color-zinc-500: var(--tw-color-zinc-600);
  --tw-color-zinc-600: var(--tw-color-zinc-700);
  --tw-color-gray-400: var(--tw-color-gray-500);
  --tw-color-gray-500: var(--tw-color-gray-600);
  --tw-color-gray-600: var(--tw-color-gray-700);
  --tw-color-stone-400: var(--tw-color-stone-500);
  --tw-color-stone-500: var(--tw-color-stone-600);
  --tw-color-stone-600: var(--tw-color-stone-700);
}

@media (prefers-color-scheme: dark) {
  html.not(.light) {
    --border-color: #333;
    --theme-color: var(--auto-theme-color, theme("colors.orange.600"));
  }
}

@media (prefers-color-scheme: light) {
  html.not(.dark) {
    --border-color: #eee;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.dark::view-transition-old(root) {
  z-index: 9999;
}

.dark::view-transition-new(root) {
  z-index: 1;
}
