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

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

@layer base {
  :root {
    /* Aheri Care Brand Colors */
    --background: 0 0% 100%;
    --foreground: 260 20% 20%;

    --card: 0 0% 100%;
    --card-foreground: 260 20% 20%;

    --popover: 0 0% 100%;
    --popover-foreground: 260 20% 20%;

    /* Primary: Maroon/Burgundy from logo */
    --primary: 326 48% 33%;
    --primary-foreground: 0 0% 100%;

    /* Secondary: Lime Green from logo */
    --secondary: 84 55% 50%;
    --secondary-foreground: 0 0% 100%;

    --muted: 260 10% 96%;
    --muted-foreground: 260 10% 45%;

    /* Accent: Softer green */
    --accent: 84 45% 92%;
    --accent-foreground: 326 48% 33%;

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

    --border: 260 10% 90%;
    --input: 260 10% 90%;
    --ring: 326 48% 33%;

    --radius: 0.75rem;

    /* Custom brand tokens */
    --maroon: 326 48% 33%;
    --maroon-light: 326 40% 45%;
    --maroon-dark: 326 55% 25%;
    --green: 84 55% 50%;
    --green-light: 84 50% 60%;
    --green-dark: 84 60% 40%;
    --cream: 45 30% 97%;
    --warm-gray: 30 10% 50%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(326, 48%, 33%) 0%, hsl(326, 55%, 25%) 100%);
    --gradient-secondary: linear-gradient(135deg, hsl(84, 55%, 50%) 0%, hsl(84, 60%, 40%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(326, 48%, 33%) 0%, hsl(300, 40%, 25%) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(45, 30%, 97%) 100%);

    /* Shadows */
    --shadow-sm: 0 2px 8px -2px hsl(326 48% 33% / 0.1);
    --shadow-md: 0 8px 24px -8px hsl(326 48% 33% / 0.15);
    --shadow-lg: 0 16px 48px -12px hsl(326 48% 33% / 0.2);
    --shadow-glow: 0 0 40px hsl(84 55% 50% / 0.3);

    /* Sidebar */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 260 10% 26%;
    --sidebar-primary: 326 48% 33%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 84 45% 95%;
    --sidebar-accent-foreground: 326 48% 33%;
    --sidebar-border: 260 10% 91%;
    --sidebar-ring: 326 48% 33%;
  }

  .dark {
    --background: 260 30% 8%;
    --foreground: 0 0% 98%;

    --card: 260 25% 12%;
    --card-foreground: 0 0% 98%;

    --popover: 260 25% 12%;
    --popover-foreground: 0 0% 98%;

    --primary: 326 48% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 84 50% 45%;
    --secondary-foreground: 0 0% 100%;

    --muted: 260 20% 18%;
    --muted-foreground: 260 10% 65%;

    --accent: 84 40% 20%;
    --accent-foreground: 84 50% 70%;

    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 100%;

    --border: 260 20% 20%;
    --input: 260 20% 20%;
    --ring: 326 48% 50%;

    --sidebar-background: 260 25% 10%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-primary: 326 48% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 260 20% 18%;
    --sidebar-accent-foreground: 0 0% 95%;
    --sidebar-border: 260 20% 20%;
    --sidebar-ring: 326 48% 55%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

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

@layer components {
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .section-padding {
    @apply py-16 md:py-24;
  }

  .gradient-text {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-primary);
  }

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

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

  .card-hover {
    @apply transition-all duration-300 hover:-translate-y-2;
    box-shadow: var(--shadow-sm);
  }

  .card-hover:hover {
    box-shadow: var(--shadow-lg);
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
  }

  .animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out forwards;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
  }

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

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulse 3s ease-in-out infinite;
  }

  .delay-100 { animation-delay: 0.1s; }
  .delay-200 { animation-delay: 0.2s; }
  .delay-300 { animation-delay: 0.3s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-500 { animation-delay: 0.5s; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Liquid Glass Effect */
.glass-effect {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.dark .glass-effect {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}