@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap');

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

/* Modern Cleaning Service Design System */
@layer base {
  :root {
    /* Core Brand Colors - Your Specified Palette */
    --primary: 180 63% 36%; /* #18A5A5 */
    --primary-light: 180 45% 40%; /* Lighter variant */
    --primary-dark: 203 55% 25%; /* #185166 */
    --primary-foreground: 0 0% 100%;

    /* Supporting Colors */
    --secondary: 210 40% 96%; /* Light gray */
    --secondary-foreground: 210 11% 15%; /* #2C3338 */
    --accent: 180 63% 36%; /* #18A5A5 - matching primary */
    --accent-foreground: 0 0% 100%;

    /* Neutrals */
    --background: 0 0% 100%;
    --foreground: 203 55% 25%; /* #185166 - Dark blue/grey instead of black */
    --muted: 210 40% 96%;
    --muted-foreground: 210 11% 22%; /* #3C434A */

    /* Surface Colors */
    --card: 0 0% 100%;
    --card-foreground: 210 11% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 11% 15%;

    /* Interactive Elements */
    --border: 210 40% 90%;
    --input: 210 40% 95%;
    --ring: 180 63% 36%;

    /* Functional Colors */
    --destructive: 0 85% 60%;
    --destructive-foreground: 0 0% 100%;
    --success: 180 63% 36%; /* Use primary color instead of green */
    --success-foreground: 0 0% 100%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(180 100% 35%), hsl(180 100% 45%));
    --gradient-hero: linear-gradient(135deg, hsl(180 100% 25%) 0%, hsl(180 100% 35%) 50%, hsl(180 100% 45%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(45 100% 60%), hsl(35 100% 55%));
    --gradient-surface: linear-gradient(135deg, hsl(0 0% 100%), hsl(200 15% 98%));

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 179, 179, 0.08);
    --shadow-md: 0 8px 25px rgba(0, 179, 179, 0.15);
    --shadow-lg: 0 20px 50px rgba(0, 179, 179, 0.2);
    --shadow-glow: 0 0 30px rgba(0, 179, 179, 0.3);

    /* Animations */
    --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.75rem;
  }

  .dark {
    --background: 0 0% 0%; /* #000000 */
    --foreground: 0 0% 95%;
    --card: 210 11% 15%; /* #2C3338 */
    --card-foreground: 0 0% 95%;
    --popover: 210 11% 15%;
    --popover-foreground: 0 0% 95%;
    --primary: 180 63% 36%; /* #18A5A5 */
    --primary-foreground: 0 0% 95%;
    --secondary: 203 55% 25%; /* #185166 */
    --secondary-foreground: 0 0% 95%;
    --muted: 210 11% 15%;
    --muted-foreground: 200 10% 65%;
    --accent: 180 63% 36%; /* #18A5A5 */
    --accent-foreground: 0 0% 95%;
    --destructive: 0 85% 65%;
    --destructive-foreground: 0 0% 95%;
    --border: 203 55% 25%;
    --input: 210 11% 15%;
    --ring: 180 63% 36%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
  }
}

@layer components {
  /* Hero Button Variants */
  .btn-hero {
    @apply bg-gradient-to-r from-primary to-primary-light text-primary-foreground px-8 py-4 rounded-2xl font-semibold text-lg shadow-lg hover:shadow-glow transform hover:scale-105 transition-all duration-300 flex items-center gap-3;
  }

  .btn-secondary {
    @apply bg-white/10 backdrop-blur-sm text-white border border-white/20 px-6 py-3 rounded-xl font-medium hover:bg-white/20 transition-all duration-300;
  }

  /* Card Variants */
  .card-glass {
    @apply bg-white/95 backdrop-blur-lg border border-white/20 rounded-2xl shadow-lg;
  }

  .card-feature {
    @apply bg-white rounded-2xl p-8 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1;
  }

  /* Section Styling */
  .section-container {
    @apply max-w-7xl mx-auto px-6 lg:px-8;
  }

  .section-padding {
    @apply py-20 lg:py-28;
  }

  /* Text Gradients */
  .text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Custom Animations */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
  }

  .animate-fade-in-delayed {
    animation: fadeInDelayed 1s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
  }
}

@layer utilities {
  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }
  
  .shadow-primary {
    box-shadow: var(--shadow-md);
  }

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

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

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

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDelayed {
  to {
    opacity: 1;
  }
}