@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 210 25% 6%;
    --foreground: 210 35% 96%;
    --card: 215 32% 9%;
    --card-foreground: 210 35% 96%;
    --popover: 215 32% 9%;
    --popover-foreground: 210 35% 96%;
    --primary: 209 79% 52%;
    --primary-foreground: 210 35% 96%;
    --secondary: 215 25% 16%;
    --secondary-foreground: 210 35% 96%;
    --muted: 215 15% 65%;
    --muted-foreground: 215 15% 65%;
    --accent: 42 95% 57%;
    --accent-foreground: 215 25% 10%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 35% 96%;
    --border: 215 25% 24%;
    --input: 215 25% 24%;
    --ring: 209 79% 52%;
    --radius: 0.75rem;
  }

  .light {
    --background: 0 0% 98%;
    --foreground: 223 25% 12%;
    --card: 0 0% 100%;
    --card-foreground: 223 25% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 223 25% 12%;
    --primary: 209 79% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 17% 94%;
    --secondary-foreground: 223 25% 20%;
    --muted: 223 15% 45%;
    --muted-foreground: 223 15% 45%;
    --accent: 40 96% 62%;
    --accent-foreground: 223 25% 12%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 17% 90%;
    --input: 220 17% 90%;
    --ring: 209 79% 52%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply min-h-screen bg-background font-sans text-foreground antialiased;
    background-image: radial-gradient(
        circle at 10% 18%,
        rgba(54, 211, 153, 0.16),
        transparent 28%
      ),
      radial-gradient(
        circle at 78% 4%,
        rgba(249, 168, 38, 0.14),
        transparent 24%
      ),
      radial-gradient(
        circle at 50% 90%,
        rgba(54, 211, 153, 0.08),
        transparent 30%
      );
  }

  a {
    @apply text-inherit no-underline;
  }
}

@layer components {
  .glass-panel {
    @apply rounded-2xl border border-border bg-card/85 shadow-card backdrop-blur;
  }
}