:root,
[data-theme="light"] {
  color-scheme: light;

  --sly-black: 345 6% 13%;
  --sly-red: 357 85% 52%;
  --sly-gray-100: 210 4% 83%;
  --sly-gray-500: 210 2% 59%;
  --sly-white: 0 0% 100%;

  --background: 0 0% 98%;
  --foreground: var(--sly-black);
  --card: var(--sly-white);
  --card-foreground: var(--sly-black);
  --popover: var(--sly-white);
  --popover-foreground: var(--sly-black);
  --primary: var(--sly-black);
  --primary-foreground: var(--sly-white);
  --secondary: 210 4% 92%;
  --secondary-foreground: var(--sly-black);
  --muted: 210 4% 94%;
  --muted-foreground: var(--sly-gray-500);
  --accent: var(--sly-red);
  --accent-foreground: var(--sly-white);
  --destructive: var(--sly-red);
  --destructive-foreground: var(--sly-white);
  --success: 154 58% 36%;
  --warning: 38 92% 48%;
  --info: 214 82% 44%;
  --border: 210 4% 84%;
  --input: 210 4% 84%;
  --ring: var(--sly-red);
  --radius: 0.5rem;
}

[data-theme="dark"],
.dark {
  color-scheme: dark;

  --background: var(--sly-black);
  --foreground: 0 0% 96%;
  --card: 345 6% 16%;
  --card-foreground: 0 0% 96%;
  --popover: 345 6% 16%;
  --popover-foreground: 0 0% 96%;
  --primary: 0 0% 96%;
  --primary-foreground: var(--sly-black);
  --secondary: 345 5% 22%;
  --secondary-foreground: 0 0% 96%;
  --muted: 345 5% 20%;
  --muted-foreground: var(--sly-gray-100);
  --accent: var(--sly-red);
  --accent-foreground: var(--sly-white);
  --border: 345 5% 28%;
  --input: 345 5% 28%;
  --ring: var(--sly-red);
}