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

@layer base {
  /* Base element styles */
  body {
    @apply bg-beige-50 text-warm-gray-900 font-body text-base leading-relaxed;
  }

  /* Typography styles */
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-semibold text-warm-gray-900;
    line-height: 1.2;
  }

  h1 {
    @apply text-5xl font-bold;
    line-height: 1.1;
  }

  h2 {
    @apply text-4xl;
  }

  h3 {
    @apply text-2xl;
  }
}

@layer components {
  /* Button Styles */
  .btn-primary {
    @apply bg-purple-600 text-white px-6 py-3 rounded-button font-medium transition-all duration-200;
    font-size: 0.9375rem;
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.1);
  }

  .btn-primary:hover {
    @apply bg-purple-700 -translate-y-px;
    box-shadow: 0 4px 8px rgba(124, 58, 237, 0.2);
  }

  .btn-accent {
    @apply bg-terracotta-500 text-white px-6 py-3 rounded-button font-medium transition-all duration-200;
    font-size: 0.9375rem;
    box-shadow: 0 2px 4px rgba(224, 120, 86, 0.1);
  }

  .btn-accent:hover {
    @apply bg-terracotta-600 -translate-y-px;
    box-shadow: 0 4px 8px rgba(224, 120, 86, 0.2);
  }

  .btn-secondary {
    @apply bg-beige-100 text-warm-gray-900 px-6 py-3 rounded-button border border-purple-600 font-medium transition-all duration-200;
    font-size: 0.9375rem;
  }

  .btn-secondary:hover {
    @apply bg-purple-50 border-purple-700;
  }

  /* Card Styles */
  .card-warm {
    @apply bg-white rounded-card border border-beige-200 p-6 transition-shadow duration-200;
    box-shadow: 0 2px 8px rgba(64, 64, 64, 0.06);
  }

  .card-warm:hover {
    box-shadow: 0 4px 16px rgba(64, 64, 64, 0.1);
  }

  /* Flash Message Styles */
  .flash-notice {
    @apply bg-purple-50 text-warm-gray-900 p-4 px-6 rounded-button mb-6 flex items-center gap-3;
    border-left: 4px solid #7c3aed;
  }

  .flash-alert {
    @apply bg-red-50 text-warm-gray-900 p-4 px-6 rounded-button mb-6 flex items-center gap-3;
    border-left: 4px solid #dc2626;
  }

  .flash-success {
    @apply text-warm-gray-900 p-4 px-6 rounded-button mb-6 flex items-center gap-3;
    background-color: #fef6f0;
    border-left: 4px solid #e07856;
  }
}