.custom {
  --background: 220, 10%, 13%;
  --dark-gray: 0, 0%, 0%, 1;

  --background-gradient: linear-gradient(
    180deg,
    hsla(var(--background)),
    hsla(var(--background))
  );

  --hero-gradient: linear-gradient(
    180deg,
    hsla(var(--background), 1) 0%,
    hsla(220, 12%, 16%, 0.5) 50%,
    hsla(var(--background), 1) 100%
  );

  --foreground: 30, 5%, 90%;
  --card: 220, 8%, 15% / 0.7;
  --card-foreground: 30, 5%, 90%;
  --popover: 220, 10%, 14%;
  --popover-foreground: 30, 5%, 90%;
  --primary: 15, 60%, 35%;
  --primary-foreground: 30, 5%, 95%;
  --secondary: 220, 20%, 25% / 0.6;
  --secondary-foreground: 30, 5%, 90%;
  --tertiary: 35, 25%, 65%;
  --tertiary-foreground: 220, 15%, 15%;

  --muted: 220, 8%, 25%;
  --muted-foreground: 30, 5%, 75%;
  --accent: 15, 70%, 35%;
  --accent-foreground: 30, 5%, 95%;
  --destructive: 0, 70%, 40%;
  --destructive-foreground: 30, 5%, 95%;
  --border: 15, 40%, 35%;
  --input: 220, 10%, 22% / 0.6;
  --ring: 220, 15%, 45%;
  --chart-1: 220, 55%, 45%;
  --chart-2: 15, 60%, 35%;
  --chart-3: 35, 25%, 65%;
  --chart-4: 220, 20%, 25%;
  --chart-5: 0, 70%, 40%;

  --highlight: 15, 65%, 45%;
  --game-shadow: 0 0 24px hsl(var(--highlight));
}