:root {
  --background: 210 21% 5%;
  --foreground: 0 0% 100%;
  --card: 210 21% 8%;
  --card-foreground: 0 0% 100%;
  --popover: 210 21% 8%;
  --popover-foreground: 0 0% 100%;
  --primary: 141 90% 54%;
  --primary-foreground: 210 21% 5%;
  --secondary: 144 84% 38%;
  --secondary-foreground: 210 21% 5%;
  --muted: 210 21% 12%;
  --muted-foreground: 210 16% 76%;
  --accent: 141 90% 54%;
  --accent-foreground: 210 21% 5%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 210 21% 15%;
  --input: 210 21% 15%;
  --ring: 141 90% 54%;
  --chart-1: 141 90% 54%;
  --chart-2: 144 84% 38%;
  --chart-3: 199 89% 55%;
  --chart-4: 221 83% 60%;
  --chart-5: 30 90% 60%;
  --radius: 0.5rem;
}

body {
  background-image:
    radial-gradient(
      circle at 85% 15%,
      hsl(var(--primary) / 0.25),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      hsl(var(--background)) 0%,
      hsl(var(--background)) 55%,
      hsl(var(--primary) / 0.22) 100%
    );
  background-attachment: fixed;
  background-size: cover;
  color: hsl(var(--foreground));
  font-family: "Inter", sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.font-headline {
  font-family: "Poppins", sans-serif;
}

.shadow-card {
  box-shadow: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease both;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.prose {
  max-width: 75ch;
  line-height: 1.75;
}

.prose h1 {
  font-size: 2.5rem;
  margin-top: 0.5rem;
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
}

.prose h3 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
}

.prose p {
  margin-top: 1rem;
}

.prose ul {
  margin-top: 1rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.prose li {
  margin-top: 0.5rem;
}

.prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

.prose-invert {
  color: hsl(var(--foreground));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}

.bg-primary\/90 {
  background-color: hsl(var(--primary) / 0.9);
}

.border-primary {
  border-color: hsl(var(--primary));
}

.border-primary\/20 {
  border-color: hsl(var(--primary) / 0.2);
}

.border-primary\/30 {
  border-color: hsl(var(--primary) / 0.3);
}

.hover\\:bg-primary\\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.text-primary\\/80 {
  color: hsl(var(--primary) / 0.8);
}

.text-secondary {
  color: hsl(var(--secondary));
}

.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.bg-secondary\\/10 {
  background-color: hsl(var(--secondary) / 0.1);
}

.bg-muted {
  background-color: hsl(var(--muted));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.bg-background {
  background-color: hsl(var(--background));
}

.bg-background\/60 {
  background-color: hsl(var(--background) / 0.6);
}

.text-foreground {
  color: hsl(var(--foreground));
}

.border-border {
  border-color: hsl(var(--border));
}

.hover\\:text-primary:hover {
  color: hsl(var(--primary));
}

.hover\\:text-primary\\/80:hover {
  color: hsl(var(--primary) / 0.8);
}