.custom {
  --background: 220, 30%, 10%; /* dark navy */
  --dark-gray: 0, 0%, 0%, 1;

  --background-gradient: radial-gradient(
    circle,
    hsla(var(--background)),
    hsla(var(--background))
  );

  --hero-gradient: linear-gradient(
    180deg,
    hsla(var(--background), 1) 0%,
    hsla(var(--background), 0.5) 20%,
    hsla(var(--background), 1) 40%
  );

  --foreground: 0 0% 100%;
  --card: 0 0% 100% / 0.05;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 100%;

  --primary: 0, 100%, 45%; /* firetruck red */
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 100% / 0.12;
  --secondary-foreground: 0 0% 98%;
  --tertiary: 50, 100%, 60%; /* yellow */
  --tertiary-foreground: 0 0% 0%;

  --muted: 0 0% 20%;
  --muted-foreground: 0 0% 60%;

  --accent: 12, 100%, 50%; /* amber */
  --accent-foreground: 0 0% 98%;

  --destructive: 0 100% 70%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 100% / 0.12;
  --input: 0 0% 100% / 0.1;
  --ring: 0 0% 85%;

  --chart-1: 0 100% 50%; /* red */
  --chart-2: 50 100% 50%; /* yellow */
  --chart-3: 200 100% 50%; /* blue */
  --chart-4: 120 100% 45%; /* green */
  --chart-5: 280 70% 60%; /* purple */

  --highlight: 20, 90%, 55%; /* bright orange */
  --game-shadow: 0 0 24px hsl(var(--highlight));
}

@media (width >= 64rem) {
  .custom {
    --hero-gradient: linear-gradient(
      180deg,
      hsla(var(--background), 1) 0%,
      hsla(var(--background), 0.5) 50%,
      hsla(var(--background), 1) 100%
    );
  }
}