@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

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

@layer base {
  :root {
    --background: 0 0% 99%;
    --foreground: 192 30% 10%;

    --card: 0 0% 100%;
    --card-foreground: 192 30% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 192 30% 10%;

    --primary: 185 70% 22%;
    --primary-foreground: 60 30% 96%;

    --secondary: 75 45% 92%;
    --secondary-foreground: 185 70% 22%;

    --muted: 180 10% 95%;
    --muted-foreground: 192 15% 45%;

    --accent: 75 65% 50%;
    --accent-foreground: 192 30% 10%;

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

    --border: 180 15% 90%;
    --input: 180 15% 88%;
    --ring: 185 70% 22%;

    --radius: 0.75rem;

    --sidebar-background: 192 30% 8%;
    --sidebar-foreground: 60 30% 96%;
    --sidebar-primary: 75 65% 50%;
    --sidebar-primary-foreground: 192 30% 10%;
    --sidebar-accent: 192 25% 15%;
    --sidebar-accent-foreground: 60 30% 96%;
    --sidebar-border: 192 20% 18%;
    --sidebar-ring: 75 65% 50%;

    /* Custom tokens */
    --hero-bg: 192 30% 8%;
    --hero-fg: 60 30% 96%;
    --glow: 75 65% 50%;
    --glow-secondary: 50 80% 58%;
  }

  .dark {
    --background: 192 30% 6%;
    --foreground: 60 30% 96%;
    --card: 192 25% 10%;
    --card-foreground: 60 30% 96%;
    --popover: 192 25% 10%;
    --popover-foreground: 60 30% 96%;
    --primary: 75 65% 50%;
    --primary-foreground: 192 30% 8%;
    --secondary: 192 25% 15%;
    --secondary-foreground: 60 30% 96%;
    --muted: 192 20% 15%;
    --muted-foreground: 180 10% 60%;
    --accent: 75 65% 50%;
    --accent-foreground: 192 30% 8%;
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 100%;
    --border: 192 20% 18%;
    --input: 192 20% 18%;
    --ring: 75 65% 50%;
  }
}

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

  body {
    @apply bg-background text-foreground font-body antialiased overflow-x-hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(var(--glow)), hsl(var(--glow-secondary)));
  }

  .bg-hero {
    background-color: hsl(var(--hero-bg));
    color: hsl(var(--hero-fg));
  }

  .bg-glow-gradient {
    background: linear-gradient(135deg, hsl(var(--glow)), hsl(var(--glow-secondary)));
  }

  .shadow-glow {
    box-shadow: 0 0 40px -10px hsl(var(--glow) / 0.4);
  }

  .section-padding {
    @apply py-20 md:py-28 px-4 md:px-8;
  }

  .hero-bg-animate {
    animation: hero-wave 14s ease-in-out infinite;
  }

  @keyframes hero-wave {
    0% {
      transform: scale(1.08) translate(0%, 0%) rotate(0deg);
    }
    15% {
      transform: scale(1.12) translate(-2%, -1%) rotate(0.3deg);
    }
    30% {
      transform: scale(1.09) translate(1.5%, -2%) rotate(-0.2deg);
    }
    45% {
      transform: scale(1.13) translate(-1%, 1.5%) rotate(0.4deg);
    }
    60% {
      transform: scale(1.1) translate(2%, -0.5%) rotate(-0.3deg);
    }
    75% {
      transform: scale(1.14) translate(-1.5%, 1%) rotate(0.2deg);
    }
    90% {
      transform: scale(1.09) translate(0.5%, -1.5%) rotate(-0.1deg);
    }
    100% {
      transform: scale(1.08) translate(0%, 0%) rotate(0deg);
    }
  }

  .hero-light-sweep {
    background: linear-gradient(
      105deg,
      transparent 0%,
      transparent 35%,
      hsl(var(--glow) / 0.06) 42%,
      hsl(var(--glow) / 0.12) 50%,
      hsl(var(--glow) / 0.06) 58%,
      transparent 65%,
      transparent 100%
    );
    animation: light-sweep 6s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes light-sweep {
    0%, 100% {
      opacity: 0;
      transform: translateX(-120%);
    }
    30%, 70% {
      opacity: 1;
    }
    50% {
      transform: translateX(120%);
    }
    100% {
      opacity: 0;
      transform: translateX(120%);
    }
  }

  .hero-orb-1 {
    animation: orb-float-1 10s ease-in-out infinite;
  }

  .hero-orb-2 {
    animation: orb-float-2 13s ease-in-out infinite;
  }

  .hero-orb-3 {
    animation: orb-float-3 16s ease-in-out infinite;
  }

  @keyframes orb-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    33% { transform: translate(40px, -30px) scale(1.2); opacity: 0.8; }
    66% { transform: translate(-20px, 15px) scale(1.1); opacity: 0.6; }
  }

  @keyframes orb-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    33% { transform: translate(-35px, 25px) scale(1.15); opacity: 0.7; }
    66% { transform: translate(25px, -20px) scale(1.05); opacity: 0.5; }
  }

  @keyframes orb-float-3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    33% { transform: translate(calc(-50% + 30px), calc(-50% - 25px)) scale(1.25); opacity: 0.6; }
    66% { transform: translate(calc(-50% - 20px), calc(-50% + 15px)) scale(1.1); opacity: 0.4; }
  }

  /* Flora halo animation */
  .flora-halo {
    background: conic-gradient(
      from 0deg,
      transparent 0%,
      hsl(var(--glow) / 0.4) 15%,
      transparent 30%,
      hsl(var(--glow-secondary) / 0.3) 50%,
      transparent 65%,
      hsl(var(--glow) / 0.35) 80%,
      transparent 100%
    );
    filter: blur(18px);
    animation: flora-halo-spin 4s linear infinite;
  }

  .flora-halo-reverse {
    background: conic-gradient(
      from 180deg,
      transparent 0%,
      hsl(var(--glow-secondary) / 0.3) 20%,
      transparent 40%,
      hsl(var(--glow) / 0.25) 60%,
      transparent 80%,
      hsl(var(--glow-secondary) / 0.2) 100%
    );
    filter: blur(24px);
    animation: flora-halo-spin 6s linear infinite reverse;
  }

  @keyframes flora-halo-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}