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

@layer base {
  :root {
    --background: 220 27% 8%;
    --foreground: 210 40% 98%;
    --card: 224 30% 12%;
    --card-foreground: 210 40% 98%;
    --popover: 224 30% 12%;
    --popover-foreground: 210 40% 98%;
    --primary: 168 76% 42%;
    --primary-foreground: 220 27% 8%;
    --secondary: 220 20% 20%;
    --secondary-foreground: 210 40% 98%;
    --muted: 220 15% 25%;
    --muted-foreground: 220 9% 55%;
    --accent: 142 76% 36%;
    --accent-foreground: 220 27% 8%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 220 15% 25%;
    --input: 220 15% 25%;
    --ring: 168 76% 42%;
    --radius: 1.25rem;

    /* Chat specific colors */
    --chat-background: 220 27% 8%;
    --chat-surface: 224 30% 12%;
    --chat-border: 220 15% 25%;
    --user-bubble: 237 84% 62%;
    --success: 142 76% 36%;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(168 76% 42%), hsl(142 76% 36%));
    --gradient-user: linear-gradient(135deg, hsl(237 84% 62%), hsl(251 91% 68%));
    --gradient-surface: linear-gradient(145deg, hsl(224 30% 12% / 0.5), hsl(220 20% 16% / 0.5));
    
    /* Shadows */
    --shadow-elegant: 0 20px 40px -15px hsl(220 27% 5% / 0.7);
    --shadow-glow: 0 0 40px hsl(168 76% 42% / 0.25);
    --shadow-message: 0 4px 20px hsl(220 27% 5% / 0.4);
  }
}

@layer base {
  body {
    @apply bg-background text-foreground;
  }
}
