:root {
  --background: 220 42% 6%;
  --foreground: 42 38% 96%;
  --card: 224 35% 10%;
  --card-foreground: 42 38% 96%;
  --popover: 224 35% 10%;
  --popover-foreground: 42 38% 96%;
  --primary: 78 94% 52%;
  --primary-foreground: 220 42% 6%;
  --secondary: 210 35% 16%;
  --secondary-foreground: 42 38% 96%;
  --muted: 216 29% 17%;
  --muted-foreground: 42 14% 72%;
  --accent: 188 92% 54%;
  --accent-foreground: 220 42% 6%;
  --border: 212 30% 23%;
  --input: 212 30% 23%;
  --ring: 78 94% 52%;
  --hero-overlay: linear-gradient(90deg, hsla(220, 42%, 6%, .9) 0%, hsla(220, 42%, 6%, .62) 48%, hsla(188, 92%, 18%, .34) 100%);
  --section-dark: 220 46% 5%;
  --section-light: 42 38% 94%;
  --section-light-foreground: 220 42% 8%;
  --gold: 12 92% 62%;
}

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

.section-light {
  background:
    linear-gradient(135deg, hsl(var(--section-light)) 0%, hsl(188 80% 90%) 100%);
  color: hsl(var(--section-light-foreground));
}

.section-dark {
  background:
    radial-gradient(circle at 18% 10%, hsl(188 92% 18% / .28), transparent 32%),
    linear-gradient(180deg, hsl(var(--section-dark)), hsl(220 42% 7%));
}

.bg-primary {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(188 92% 45%));
}

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

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