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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 220 25% 97%;
    --foreground: 222 47% 11%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    --primary: 243 75% 59%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 250 85% 68%;

    --secondary: 220 17% 93%;
    --secondary-foreground: 222 47% 11%;

    --muted: 220 17% 93%;
    --muted-foreground: 220 9% 46%;

    --accent: 262 83% 65%;
    --accent-foreground: 0 0% 100%;

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

    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --border: 220 17% 88%;
    --input: 220 17% 88%;
    --ring: 243 75% 59%;

    --radius: 0.75rem;

    --gradient-primary: linear-gradient(135deg, hsl(243 75% 59%), hsl(262 83% 65%));
    --gradient-subtle: linear-gradient(180deg, hsl(220 25% 97%), hsl(220 30% 99%));
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(220 25% 99%));
    
    --shadow-elegant: 0 4px 20px -2px hsl(243 75% 59% / 0.12);
    --shadow-card: 0 2px 8px -1px hsl(220 17% 88% / 0.3);
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dark {
    --background: 222 47% 7%;
    --foreground: 210 40% 98%;

    --card: 222 47% 9%;
    --card-foreground: 210 40% 98%;

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

    --primary: 243 75% 59%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 250 85% 68%;

    --secondary: 217 33% 17%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;

    --accent: 262 83% 65%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 243 75% 59%;

    --gradient-primary: linear-gradient(135deg, hsl(243 75% 59%), hsl(262 83% 65%));
    --gradient-subtle: linear-gradient(180deg, hsl(222 47% 7%), hsl(222 47% 10%));
    --gradient-card: linear-gradient(145deg, hsl(222 47% 9%), hsl(222 47% 11%));
    
    --shadow-elegant: 0 4px 20px -2px hsl(243 75% 59% / 0.25);
    --shadow-card: 0 2px 8px -1px hsl(0 0% 0% / 0.4);
  }
}

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

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