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

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

@layer base {
  :root {
    --background: 210 50% 99%;
    --foreground: 210 50% 10%;
    
    --card: 0 0% 100%;
    --card-foreground: 210 50% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 50% 10%;

    --primary: 210 70% 30%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 20% 96%;
    --secondary-foreground: 28 28% 18%;

    --muted: 210 20% 92%;
    --muted-foreground: 215 20% 45%;

    --accent: 210 90% 65%;
    --accent-foreground: 0 0% 100%;

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

    --border: 214 32% 90%;
    --input: 214 32% 90%;
    --ring: 215 20% 65%;

    --radius: 0.5rem;
    
    /* Brand color scale */
    --brand-25: 215 100% 98%;
    --brand-50: 215 100% 95%;
    --brand-100: 215 100% 90%;
    --brand-200: 215 100% 80%;
    --brand-300: 215 100% 70%;
    --brand-400: 215 100% 60%;
    --brand-500: 210 100% 46%;
    --brand-600: 210 100% 36%;
    --brand-700: 210 100% 26%;
    --brand-800: 210 85% 20%;
    --brand-900: 210 90% 15%;
    
    /* Accent colors */
    --accent1: 210 100% 46%;
    --accent1-light: 215 100% 60%;
    --accent1-dark: 210 85% 20%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans text-base leading-relaxed;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-semibold tracking-tight text-brand-800;
  }

  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl mb-6;
  }

  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl mb-5;
  }

  h3 {
    @apply text-2xl md:text-3xl mb-4;
  }

  h4 {
    @apply text-xl md:text-2xl mb-3;
  }

  .container {
    @apply px-8 sm:px-12 lg:px-16 xl:px-20 2xl:px-24 max-w-[1440px] mx-auto;
  }

  .section {
    @apply py-8 sm:py-12 md:py-16 lg:py-20;
  }

  .cta-button {
    @apply bg-accent1 hover:bg-accent1-dark text-white font-medium 
           rounded-lg text-base px-6 py-3 min-h-[44px] min-w-[44px]
           transform transition-all duration-200 ease-in-out 
           hover:scale-[1.02] active:scale-[0.98]
           will-change-transform;
  }

  .secondary-button {
    @apply bg-secondary hover:bg-secondary/80 text-brand-700 font-medium
           rounded-lg text-base px-6 py-3 min-h-[44px] min-w-[44px]
           transform transition-all duration-200 ease-in-out
           hover:scale-[1.02] active:scale-[0.98]
           will-change-transform;
  }

  .navbar-brand {
    @apply flex-shrink-0;
  }

  .navbar-brand img {
    height: 40px;
    width: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
  }

  .fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform, visibility;
  }
  
  .fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  /* Card shimmer animation */
  .shimmer {
    @apply relative overflow-hidden before:absolute before:inset-0 
           before:translate-x-[-100%] before:animate-[shimmer_2s_infinite]
           before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent;
  }

  /* Hero text animation */
  .hero-text {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
  }

  .hero-text-delay-1 {
    animation-delay: 0.2s;
  }

  .hero-text-delay-2 {
    animation-delay: 0.4s;
  }
  
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }

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