:root,
html[data-theme="light"] {
  --background: 0 0% 100%;
  --background-alt: 0 0% 88%;
  --foreground: 240 10% 4%;
  --card: 0 0% 95%;
  --card-hover: 0 0% 86%;
  --card-foreground: 0 0% 11%;
  --muted: 0 0% 57%;
  --destructive: 357 79% 47%;
  --destructive-foreground: 270 14% 95%;
}

:root,
html[data-theme="dark"] {
  --background: 240 10% 4%;
  --background-alt: 0 0% 19%;
  --foreground: 240 5% 96%;
  --card: 0 0% 11%;
  --card-hover: 0 0% 16%;
  --card-foreground: 0 0% 95%;
  --muted: 0 0% 57%;
  --destructive: 357 79% 47%;
  --destructive-foreground: 270 15% 95%;
}

body {
  font-family: -apple-system, ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.border-destructive {
  border-color: hsl(var(--destructive));
}

.border-foreground {
  border-color: hsl(var(--foreground));
}

.border-transparent {
  border-color: transparent;
}

.bg-background {
  background-color: hsl(var(--background));
}

.bg-card {
  background-color: hsl(var(--card));
}

.bg-card-foreground {
  background-color: hsl(var(--card-foreground));
}

.bg-destructive {
  background-color: hsl(var(--destructive));
}

.bg-foreground {
  background-color: hsl(var(--foreground));
}

.bg-inherit {
  background-color: inherit;
}

.bg-muted {
  background-color: hsl(var(--muted));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-card-hover:hover {
  background-color: hsl(var(--card-hover));
}

.hover\:bg-destructive:hover {
  background-color: hsl(var(--destructive));
}

.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}

.hover\:bg-inherit:hover {
  background-color: inherit;
}

.hover\:text-destructive-foreground:hover {
  color: hsl(var(--destructive-foreground));
}

.placeholder\:text-foreground::placeholder {
  color: hsl(var(--foreground));
}

.text-background {
  color: hsl(var(--background));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.text-destructive {
  color: hsl(var(--destructive));
}

.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}