@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: 36 25% 92%; /* #DDD8CA converted to HSL */
    --foreground: 106 23% 16%; /* #20321E converted to HSL */

    --card: 36 25% 92%; /* #DDD8CA */
    --card-foreground: 106 23% 16%; /* #20321E */

    --popover: 36 25% 92%; /* #DDD8CA */
    --popover-foreground: 106 23% 16%; /* #20321E */

    --primary: 108 17% 33%; /* #466245 converted to HSL */
    --primary-foreground: 36 25% 92%; /* #DDD8CA */

    --secondary: 36 25% 88%; /* Slightly darker beige */
    --secondary-foreground: 106 23% 16%; /* #20321E */

    --muted: 36 25% 88%; /* Slightly darker beige */
    --muted-foreground: 108 17% 28%; /* Darker version of #466245 */

    --accent: 108 17% 33%; /* #466245 */
    --accent-foreground: 36 25% 92%; /* #DDD8CA */

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 36 25% 92%; /* #DDD8CA */

    --border: 36 25% 85%; /* Darker beige for borders */
    --input: 36 25% 85%; /* Darker beige for inputs */
    --ring: 108 17% 33%; /* #466245 */

    --radius: 0.5rem;

    /* Gradient backgrounds for hero sections */
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--accent) / 0.05), hsl(var(--secondary) / 0.1));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));

    --sidebar-background: 36 25% 90%;
    --sidebar-foreground: 106 23% 16%;
    --sidebar-primary: 108 17% 33%;
    --sidebar-primary-foreground: 36 25% 92%;
    --sidebar-accent: 36 25% 88%;
    --sidebar-accent-foreground: 106 23% 16%;
    --sidebar-border: 36 25% 85%;
    --sidebar-ring: 108 17% 33%;
  }

  .dark {
    --background: 106 23% 16%; /* #20321E */
    --foreground: 36 25% 92%; /* #DDD8CA */

    --card: 106 23% 16%; /* #20321E */
    --card-foreground: 36 25% 92%; /* #DDD8CA */

    --popover: 106 23% 16%; /* #20321E */
    --popover-foreground: 36 25% 92%; /* #DDD8CA */

    --primary: 108 17% 33%; /* #466245 */
    --primary-foreground: 36 25% 92%; /* #DDD8CA */

    --secondary: 106 23% 20%; /* Slightly lighter than #20321E */
    --secondary-foreground: 36 25% 92%; /* #DDD8CA */

    --muted: 106 23% 20%; /* Slightly lighter than #20321E */
    --muted-foreground: 108 17% 40%; /* Lighter version of #466245 */

    --accent: 108 17% 33%; /* #466245 */
    --accent-foreground: 36 25% 92%; /* #DDD8CA */

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 36 25% 92%; /* #DDD8CA */

    --border: 106 23% 22%; /* Slightly lighter than #20321E */
    --input: 106 23% 22%; /* Slightly lighter than #20321E */
    --ring: 108 17% 33%; /* #466245 */

    /* Dark mode gradients */
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary) / 0.2), hsl(var(--accent) / 0.1), hsl(var(--secondary) / 0.15));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));

    --sidebar-background: 106 23% 16%;
    --sidebar-foreground: 36 25% 92%;
    --sidebar-primary: 108 17% 33%;
    --sidebar-primary-foreground: 36 25% 92%;
    --sidebar-accent: 106 23% 20%;
    --sidebar-accent-foreground: 36 25% 92%;
    --sidebar-border: 106 23% 22%;
    --sidebar-ring: 108 17% 33%;
  }
}

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

  html {
    /* Enable smooth scrolling */
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.6;
    /* Support for mobile safe areas */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  :where(a, button, input, select, textarea, [role="button"]):focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }
}

/* Enhanced Animations */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
  }
  33% { 
    transform: translateY(-12px) rotate(1deg); 
  }
  66% { 
    transform: translateY(6px) rotate(-1deg); 
  }
}

@keyframes fade-in {
  0% { 
    opacity: 0; 
    transform: translateY(30px) scale(0.95); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}


@keyframes glow-pulse {
  0%, 100% { 
    box-shadow: 0 0 20px hsl(var(--primary) / 0.3); 
    filter: brightness(1);
  }
  50% { 
    box-shadow: 0 0 40px hsl(var(--primary) / 0.6), 0 0 80px hsl(var(--primary) / 0.2); 
    filter: brightness(1.1);
  }
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}


@layer utilities {
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
  
  .animate-glow-pulse {
    animation: glow-pulse 3s ease-in-out infinite;
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-scale-in {
    animation: scale-in 0.6s ease-out forwards;
  }

  .animate-breathe {
    animation: breathe 4s ease-in-out infinite;
  }

  /* Staggered animation delays */
  .animate-delay-100 { animation-delay: 0.1s; }
  .animate-delay-200 { animation-delay: 0.2s; }
  .animate-delay-300 { animation-delay: 0.3s; }
  .animate-delay-500 { animation-delay: 0.5s; }
  .animate-delay-700 { animation-delay: 0.7s; }
  .animate-delay-800 { animation-delay: 0.8s; }

  .gradient-hero-bg { background: var(--gradient-hero); }
}