@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "tailwindcss";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-card-border: hsl(var(--card-border));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-popover-border: hsl(var(--popover-border));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --card-border: 220 13% 91%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --popover-border: 220 13% 91%;

  --primary: 234 89% 60%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 14% 96%;
  --secondary-foreground: 222 47% 11%;

  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;

  --accent: 234 89% 97%;
  --accent-foreground: 234 89% 40%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 234 89% 60%;

  --radius: 0.625rem;
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

.section-number {
  @apply text-sm font-semibold tracking-widest uppercase text-primary;
}

.hero-gradient {
  background: radial-gradient(ellipse 80% 60% at 50% -10%, hsl(234 89% 60% / 0.12) 0%, transparent 70%);
}

.dot-pattern {
  background-image: radial-gradient(circle, hsl(220 13% 91%) 1px, transparent 1px);
  background-size: 28px 28px;
}

.card-hover {
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card-hover:hover {
  box-shadow: 0 8px 30px hsl(234 89% 60% / 0.1);
  transform: translateY(-2px);
  border-color: hsl(234 89% 60% / 0.3);
}