@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 {
    /* Light backgrounds */
    --background: 32 40% 96%;
    --foreground: 0 0% 10%;
    
    /* Card and surfaces */
    --card: 0 0% 100%;
    --card-foreground: 0 0% 10%;
    
    /* Popover */
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 10%;
    
    /* Primary - Green brand color */
    --primary: 152 60% 45%;
    --primary-foreground: 0 0% 100%;
    
    /* Secondary - Warm brown */
    --secondary: 30 25% 55%;
    --secondary-foreground: 0 0% 100%;
    
    /* Muted - Light cream/off-white */
    --muted: 32 40% 96%;
    --muted-foreground: 0 0% 40%;
    
    /* Accent - Blue */
    --accent: 210 80% 50%;
    --accent-foreground: 0 0% 100%;
    
    /* Destructive */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    
    /* Borders and inputs */
    --border: 0 0% 88%;
    --input: 0 0% 88%;
    --ring: 152 60% 45%;
    
    --radius: 0.75rem;
    
    /* Custom gradients */
    --gradient-primary: linear-gradient(135deg, hsl(152 60% 45%), hsl(152 70% 55%));
    --gradient-hero: linear-gradient(135deg, hsl(152 60% 45%), hsl(210 80% 50%));
    --gradient-accent: linear-gradient(135deg, hsl(210 80% 50%), hsl(152 60% 45%));
    
    /* Shadows */
    --shadow-glow: 0 0 40px hsl(152 60% 45% / 0.3);
    --shadow-elegant: 0 20px 60px -15px hsl(0 0% 0% / 0.2);
    
    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --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 {
    /* Dark background */
    --background: 210 20% 12%;
    --foreground: 0 0% 98%;
    
    /* Card and surfaces - slightly lighter than background */
    --card: 210 18% 16%;
    --card-foreground: 0 0% 98%;
    
    /* Popover */
    --popover: 210 18% 16%;
    --popover-foreground: 0 0% 98%;
    
    /* Primary - Green (slightly brighter for dark mode) */
    --primary: 152 65% 50%;
    --primary-foreground: 0 0% 10%;
    
    /* Secondary - Warm brown (lighter for dark mode) */
    --secondary: 30 30% 60%;
    --secondary-foreground: 0 0% 10%;
    
    /* Muted */
    --muted: 210 18% 20%;
    --muted-foreground: 0 0% 70%;
    
    /* Accent - Blue (brighter for dark mode) */
    --accent: 210 85% 55%;
    --accent-foreground: 0 0% 10%;
    
    /* Destructive */
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;
    
    /* Borders and inputs */
    --border: 210 18% 24%;
    --input: 210 18% 24%;
    --ring: 152 65% 50%;
    --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;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight;
  }
  
  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }
  
  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl;
  }
  
  h3 {
    @apply text-2xl md:text-3xl;
  }
  
  .gradient-text {
    @apply bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent;
    background-size: 200% auto;
    animation: gradient-shift 3s ease infinite;
  }
  
  @keyframes gradient-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px hsl(152 60% 45% / 0.3); }
    50% { box-shadow: 0 0 40px hsl(152 60% 45% / 0.6); }
  }
  
  /* Fix Lovable badge close button touch target size for accessibility */
  #lovable-badge-close {
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}