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

@layer base {
  :root {
    color-scheme: light;
  }

  body {
    @apply font-sans text-body text-gray-700 bg-gray-100 antialiased;
  }

  h1 {
    @apply font-heading text-heading font-bold;
  }

  h2 {
    @apply font-heading text-subheading font-bold;
  }

  h3 {
    @apply font-heading text-body font-semibold;
  }

  h4 {
    @apply font-heading text-body font-semibold;
  }

  a {
    @apply text-primary hover:text-primary-hover transition-colors;
  }
}

@layer components {
  /* Карточки — белые, тень только на ховере */
  .card {
    @apply bg-white rounded-medium transition-shadow duration-200;
  }

  .card:hover {
    @apply shadow-hover;
  }

  /* Кнопки */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-small font-semibold text-body transition-all duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-60 disabled:cursor-not-allowed;
    min-height: 44px;
    padding: 10px 16px;
  }

  .btn-solid {
    @apply bg-primary text-white hover:bg-primary-hover hover:shadow-hover;
  }

  .btn-outline {
    @apply bg-transparent text-primary border-2 border-primary hover:bg-primary hover:text-white;
  }

  /* Инпуты */
  .input {
    @apply w-full rounded-small bg-white border border-gray-400 text-body text-gray-700 placeholder:text-gray-400 px-3 py-2.5 focus:border-primary focus:ring-1 focus:ring-primary;
  }
}
