:root {
  --background: 232 32% 7%;
  --foreground: 42 32% 96%;
  --card: 234 28% 11%;
  --card-foreground: 42 32% 96%;
  --popover: 234 28% 11%;
  --popover-foreground: 42 32% 96%;
  --primary: 14 92% 61%;
  --primary-foreground: 232 32% 7%;
  --secondary: 202 26% 16%;
  --secondary-foreground: 42 32% 96%;
  --muted: 226 24% 17%;
  --muted-foreground: 42 15% 72%;
  --accent: 164 74% 48%;
  --accent-foreground: 232 32% 7%;
  --border: 218 24% 24%;
  --input: 218 24% 24%;
  --ring: 14 92% 61%;
  --hero-overlay: linear-gradient(90deg, hsla(232, 32%, 7%, .92) 0%, hsla(232, 32%, 7%, .68) 52%, hsla(14, 92%, 20%, .35) 100%);
  --section-dark: 232 38% 5%;
  --section-light: 44 30% 94%;
  --section-light-foreground: 232 32% 9%;
  --gold: 43 92% 58%;
}

.text-gradient {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--gold)) 48%, hsl(var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-light {
  background:
    radial-gradient(circle at 82% 18%, hsl(164 74% 48% / .18), transparent 28%),
    linear-gradient(135deg, hsl(var(--section-light)) 0%, hsl(37 35% 88%) 100%);
  color: hsl(var(--section-light-foreground));
}

.section-dark {
  background:
    radial-gradient(circle at 16% 12%, hsl(14 92% 32% / .3), transparent 34%),
    radial-gradient(circle at 84% 20%, hsl(164 74% 28% / .22), transparent 30%),
    linear-gradient(180deg, hsl(var(--section-dark)), hsl(232 32% 7%));
}

.bg-primary {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--gold)));
}

.bg-card {
  box-shadow: inset 0 1px 0 hsl(42 32% 96% / .05);
}

.nav-link.active {
  color: hsl(var(--primary)) !important;
}

#hero img,
#stats img,
#about img {
  filter: saturate(1.06) contrast(1.04);
}

img[src$=".jpg"] {
  background-color: hsl(var(--card));
}