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

@layer base {
  :root {
    /* Updated color palette with better contrast ratios */
    --teal: 173 80% 35%; /* Darker teal for better contrast */
    --teal-light: 173 80% 40%;
    --teal-dark: 173 80% 30%;
    --deepgreen: 173 80% 25%;
    --lightgreen: 173 80% 45%;
    --offwhite: 0 0% 100%;
    --gray-900: 222 47% 11%;
    --gray-800: 217 33% 17%;
    --gray-700: 217 19% 27%;
    --gray-600: 215 16% 47%;
    --gray-500: 215 14% 34%;
    --gray-400: 215 13% 25%;
    --gray-300: 215 12% 20%;
    --gray-200: 215 11% 15%;
    --gray-100: 215 10% 10%;
  }
}

@layer components {
  /* Button styles with improved contrast */
  .btn-primary {
    @apply bg-teal text-white px-12 py-4 rounded-full font-semibold shadow-lg 
           transition-all duration-300 transform hover:bg-teal-dark 
           hover:shadow-xl hover:scale-105;
  }

  .btn-secondary {
    @apply bg-white text-teal-dark px-12 py-4 rounded-full font-semibold 
           border-2 border-teal-dark shadow-lg transition-all duration-300 
           transform hover:bg-teal-dark hover:text-white hover:shadow-xl 
           hover:scale-105;
  }

  /* Card styles with improved contrast */
  .card {
    @apply bg-white dark:bg-gray-800 rounded-xl border border-gray-200 
           dark:border-gray-700 shadow-lg transition-all duration-300;
  }

  .card-hover {
    @apply hover:shadow-xl hover:border-teal-dark dark:hover:border-teal-light;
  }

  /* Navigation styles with improved contrast */
  .nav-link {
    @apply text-white font-medium transition-colors duration-200;
  }

  .nav-link:hover {
    @apply text-offwhite;
  }

  .nav-link-active {
    @apply text-white font-bold border-b-2 border-white;
  }
}

@layer utilities {
  /* Updated animations with better visibility */
  @keyframes fadein {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .animate-fadein {
    animation: fadein 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes pop {
    0% { transform: scale(0.85); opacity: 0; }
    40% { transform: scale(1.15); opacity: 1; }
    70% { transform: scale(0.98); }
    100% { transform: scale(1); }
  }
  .animate-pop {
    animation: pop 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Accessibility-focused utility classes */
  .text-high-contrast {
    @apply text-gray-900 dark:text-white;
  }
  
  .bg-high-contrast {
    @apply bg-white dark:bg-gray-800;
  }

  .border-high-contrast {
    @apply border-gray-200 dark:border-gray-700;
  }

  .hover-high-contrast {
    @apply hover:bg-gray-100 dark:hover:bg-gray-700;
  }

  /* Floating animations */
  @keyframes float-slow {
    0%, 100% {
      transform: translateY(0) translateX(0);
    }
    50% {
      transform: translateY(-20px) translateX(10px);
    }
  }

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

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

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

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

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

/* Base styles */
body {
  font-family: Arial, Helvetica, sans-serif;
  @apply text-gray-900 dark:text-white;
}

/* Heading styles with improved contrast */
.heading-primary {
  @apply text-3xl font-bold text-gray-900 dark:text-white;
}

.heading-secondary {
  @apply text-2xl font-semibold text-teal-dark dark:text-teal-light;
}

/* Text styles with improved contrast */
.text-primary {
  @apply text-gray-900 dark:text-white;
}

.text-secondary {
  @apply text-gray-700 dark:text-gray-200;
}

/* Dark mode overrides with improved contrast */
.dark {
  --background: 222 47% 11%;
  --foreground: 0 0% 100%;
  --card: 217 33% 17%;
  --card-foreground: 0 0% 100%;
  --primary: 173 80% 35%;
  --primary-foreground: 0 0% 100%;
  --secondary: 217 19% 27%;
  --secondary-foreground: 0 0% 100%;
  --muted: 217 19% 27%;
  --muted-foreground: 215 16% 47%;
  --accent: 217 19% 27%;
  --accent-foreground: 0 0% 100%;
  --border: 217 19% 27%;
  --input: 217 19% 27%;
  --ring: 173 80% 35%;
}