:root {
  font-family: "Poppins", sans-serif;
  --background: 220 27% 4%;
  --foreground: 210 40% 98%;
  --card: 222 47% 8%;
  --card-foreground: 210 40% 98%;

  --popover: 222 47% 8%;
  --popover-foreground: 210 40% 98%;

  --primary: 217 91% 60%;
  --primary-foreground: 222 47% 8%;

  --secondary: 222 47% 11%;
  --secondary-foreground: 210 40% 98%;

  --muted: 215 28% 17%;
  --muted-foreground: 217 10% 65%;

  --accent: 262 83% 58%;
  --accent-foreground: 210 40% 98%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --border: 215 28% 17%;
  --input: 215 28% 17%;
  --ring: 217 91% 60%;

  --radius: 0.75rem;

  /* Custom design tokens */
  --gradient-primary: linear-gradient(
    135deg,
    hsl(217 91% 60%),
    hsl(262 83% 58%)
  );
  --gradient-hero: linear-gradient(
    135deg,
    hsl(217 91% 60% / 0.1),
    hsl(262 83% 58% / 0.1)
  );
  --gradient-card: linear-gradient(135deg, hsl(222 47% 8%), hsl(215 28% 17%));
  --shadow-glow: 0 0 40px hsl(217 91% 60% / 0.3);
  --shadow-card: 0 8px 32px hsl(217 91% 60% / 0.1);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --sidebar-background: 0 0% 98%;

  --sidebar-foreground: 240 5.3% 26.1%;

  --sidebar-primary: 240 5.9% 10%;

  --sidebar-primary-foreground: 0 0% 98%;

  --sidebar-accent: 240 4.8% 95.9%;

  --sidebar-accent-foreground: 240 5.9% 10%;

  --sidebar-border: 220 13% 91%;

  --sidebar-ring: 217.2 91.2% 59.8%;
}

body, h1, h2, h3, p, ul, ol {
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  background-color: hsl(220 27% 4%);
  color: #fafafa;
}

main {
  width: 100%;
}

.bg-gradient-hero {
  background-image: var(--gradient-hero);
}

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

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

.bg-accent-20 {
  background-color: hsl(var(--accent) / 0.2);
}

.bg-gradient-primary {
  background-image: var(--gradient-primary);
}

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

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

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