@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Custom CSS variables for consistency */
:root {
  --brand-primary: #007c89;
  --brand-secondary: #ffe01b;
}

/* Custom component styles */
@layer components {
  /* Hero button style */
  .hero-cta {
    @apply inline-block bg-yellow-400 text-gray-900 px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300 border-2 border-transparent hover:bg-white hover:text-teal-600 hover:-translate-y-1 hover:shadow-xl;
  }
  
  /* Navigation styles */
  .nav-logo {
    @apply text-2xl font-bold text-primary-500 no-underline transition-colors duration-200;
  }
  
  .nav-link {
    @apply text-gray-900 no-underline font-medium text-sm transition-colors duration-200 hover:text-primary-500;
  }
  
  .nav-cta {
    @apply bg-primary-500 text-white px-6 py-3 rounded-full no-underline font-semibold text-sm transition-all duration-200 border-2 border-primary-500 hover:bg-white hover:text-primary-500 hover:-translate-y-px;
  }
  
  .nav-secondary {
    @apply bg-gray-50 text-gray-900 px-5 py-2.5 rounded-full no-underline font-medium text-sm border-2 border-gray-200 transition-all duration-200 hover:bg-primary-500 hover:text-white hover:border-primary-500;
  }
  
  /* Button styles */
  .btn {
    @apply inline-block px-8 py-3.5 rounded-full no-underline font-semibold text-base transition-all duration-200 border-2 border-transparent cursor-pointer text-center;
  }
  
  .btn-primary {
    @apply bg-primary-500 text-white border-primary-500 hover:brightness-110 hover:-translate-y-px hover:shadow-md;
  }
  
  .btn-secondary {
    @apply bg-gray-900 text-white border-gray-900 hover:brightness-90 hover:-translate-y-px;
  }
  
  .btn-outline {
    @apply bg-white text-gray-900 border-gray-200 hover:bg-gray-50 hover:border-primary-500 hover:text-primary-500 hover:-translate-y-px;
  }
  
  /* Card styles */
  .card {
    @apply bg-white rounded-xl p-8 shadow-sm border border-gray-100 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
  }
  
  /* Form styles */
  .form-container {
    @apply max-w-md mx-auto my-16 p-12 bg-white rounded-2xl shadow-lg border border-gray-100 transition-all duration-200;
  }
  
  .form-input {
    @apply w-full px-5 py-4 border-2 border-gray-200 rounded-lg text-base transition-all duration-200 bg-white text-gray-900 focus:outline-none focus:border-primary-500 focus:shadow-sm focus:-translate-y-px hover:border-gray-300;
  }
  
  .form-submit {
    @apply w-full bg-primary-500 text-white px-8 py-4 border-none rounded-lg text-lg font-semibold cursor-pointer transition-all duration-200 mt-4 hover:brightness-90 hover:-translate-y-px hover:shadow-md;
  }
  
  .form-link {
    @apply block text-center mt-6 text-primary-500 no-underline font-medium transition-colors duration-200 hover:brightness-75 hover:underline;
  }
  
  /* Table styles */
  .table-container {
    @apply bg-white rounded-lg p-6 shadow-sm border border-gray-100 transition-all duration-200;
  }
  
  .table {
    @apply w-full border-collapse;
  }
  
  .table th {
    @apply bg-gray-50 px-4 py-3 text-left font-semibold text-gray-900 border-b border-gray-100 text-sm;
  }
  
  .table td {
    @apply px-4 py-3 border-b border-gray-100 text-gray-600 transition-colors duration-200 align-middle;
  }
  
  /* Code example styles */
  .code-tab {
    @apply px-6 py-3 border-2 border-gray-200 bg-white text-gray-600 rounded-lg cursor-pointer font-medium transition-all duration-200 hover:border-primary-500 hover:text-primary-500;
  }
  
  .code-tab.active {
    @apply bg-primary-500 text-white border-primary-500;
  }
  
  /* Code example display */
  .code-example {
    @apply hidden;
  }
  
  .code-example.active {
    @apply block;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
  
  .nav-link {
    @apply text-gray-100 hover:text-teal-400;
  }
  
  .card {
    @apply bg-gray-800 border-gray-700;
  }
  
  .form-container {
    @apply bg-gray-800 border-gray-700;
  }
  
  .form-input {
    @apply bg-gray-800 text-gray-100 border-gray-600 focus:border-teal-400;
  }
  
  .table-container {
    @apply bg-gray-800 border-gray-700;
  }
  
  .table th {
    @apply bg-gray-700 text-gray-100 border-gray-600;
  }
  
  .table td {
    @apply text-gray-300 border-gray-600;
  }
}