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

@layer base {
  :root {
    --color-primary: #155EEF;
    --color-accent: #20C997;
    --color-cta: #FF8A3D;
    --color-surface: #F5F9FF;
    --color-text: #1F2937;
    --color-text-secondary: #6B7280;
  }

  html { scroll-behavior: smooth; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

@layer components {
  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-text-primary text-center;
  }
  .section-subtitle {
    @apply text-lg text-text-secondary text-center mt-4 max-w-2xl mx-auto;
  }
}