@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 {
    /* Reva Design System - Calming yet motivating colors */
    --background: 210 20% 98%;
    --foreground: 210 15% 20%;

    --card: 0 0% 100%;
    --card-foreground: 210 15% 20%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 15% 20%;

    /* Primary: Calming blue for trust and stability */
    --primary: 210 55% 45%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 210 55% 65%;

    /* Secondary: Soft neutral for supporting elements */
    --secondary: 210 20% 92%;
    --secondary-foreground: 210 15% 35%;

    --muted: 210 20% 95%;
    --muted-foreground: 210 10% 55%;

    /* Accent: Warm success green */
    --accent: 145 60% 45%;
    --accent-foreground: 0 0% 100%;

    /* SOS: Attention-grabbing orange */
    --sos: 25 85% 60%;
    --sos-foreground: 0 0% 100%;

    /* Success: Bright encouraging green */
    --success: 145 65% 50%;
    --success-foreground: 0 0% 100%;

    /* Warning: Gentle yellow for caution */
    --warning: 45 85% 65%;
    --warning-foreground: 210 15% 20%;

    --destructive: 0 65% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 210 20% 88%;
    --input: 210 20% 88%;
    --ring: 210 55% 45%;

    /* Gradients for beautiful backgrounds */
    --gradient-primary: linear-gradient(135deg, hsl(210 55% 45%), hsl(210 55% 65%));
    --gradient-success: linear-gradient(135deg, hsl(145 65% 50%), hsl(145 65% 70%));
    --gradient-warm: linear-gradient(135deg, hsl(210 20% 98%), hsl(210 30% 95%));
    --gradient-medal: linear-gradient(135deg, hsl(45 90% 60%), hsl(45 90% 75%));
    --gradient-premium: linear-gradient(135deg, hsl(210 55% 45%), hsl(145 60% 45%));

    /* Shadows with primary color hints */
    --shadow-soft: 0 4px 20px hsl(210 55% 45% / 0.1);
    --shadow-medium: 0 8px 30px hsl(210 55% 45% / 0.15);
    --shadow-strong: 0 12px 40px hsl(210 55% 45% / 0.2);
    --shadow-sos: 0 8px 30px hsl(25 85% 60% / 0.3);

    /* Animation timing */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --radius: 0.5rem;

    --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%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

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

/* Premium Aura Animation */
@keyframes auraPulse {
  0%, 100% {
    transform: scale(0.98);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.7;
  }
}

.premium-aura {
  background: linear-gradient(45deg, #34D399, #FBBF24, #34D399);
  background-size: 400% 400%;
  animation: auraPulse 2.5s ease-in-out infinite;
}

/* Sparkle Animation */
@keyframes sparkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) rotate(360deg);
    opacity: 0;
  }
}

.sparkle {
  animation: sparkle 800ms ease-out forwards;
}

/* Pulse Glow Animation */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px hsl(var(--primary)), 0 0 10px hsl(var(--primary)), 0 0 15px hsl(var(--primary));
  }
  50% {
    box-shadow: 0 0 10px hsl(var(--primary)), 0 0 20px hsl(var(--primary)), 0 0 30px hsl(var(--primary));
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}