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

/* Base font styles */
body {
  @apply font-sans antialiased text-[#800020] text-base;
}

/* Typography scale */
h1 {
  @apply text-2xl font-bold text-[#800020];
}

h2 {
  @apply text-xl font-semibold text-[#800020];
}

h3 {
  @apply text-lg font-semibold text-[#800020];
}

/* Text variants */
.text-primary {
  @apply text-[#800020];
}

.text-secondary {
  @apply text-[#800020];
}

.text-tertiary {
  @apply text-gray-500;
}

.text-small {
  @apply text-sm;
}

/* Utility classes for specific use cases */
.label {
  @apply text-sm font-medium text-[#800020];
}

.input-text {
  @apply text-[#800020];
}

/* Force input-text fields and their placeholders to text-sm */
.input-text, .input-text::placeholder, .input-text:-webkit-input-placeholder {
  font-size: 0.875rem !important;
}

/* Force font size for select/input-text and its options in all browsers */
select.input-text, select.input-text option {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.helper-text {
  @apply text-xs text-[#800020];
}

.error-text {
  @apply text-sm text-red-600;
}

.success-text {
  @apply text-sm text-green-600;
}

/* Circular number styling for section headers */
.section-number {
  @apply inline-flex items-center justify-center w-8 h-8 rounded-full bg-[#800020] text-white font-semibold mr-2;
}