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

@layer base {
  html { font-family: 'Public Sans', system-ui, sans-serif; color: #1C1D21; background: #FAFAF7; }
  h1, h2, h3 { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 112%; font-weight: 800; letter-spacing: -0.01em; }
  :focus-visible { outline: 3px solid #0B7A4B; outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
}

@layer components {
  .input   { @apply block w-full rounded-md border-2 border-asphalt-200 bg-white px-3 py-2.5 text-base text-asphalt placeholder-asphalt-400 focus:border-asphalt; }
  .input[aria-invalid="true"] { @apply border-flag; }
  .label   { @apply mb-1 block text-sm font-semibold text-asphalt; }
  .hint    { @apply mt-1 text-sm text-asphalt-600; }
  .error   { @apply mt-1 text-sm font-semibold text-flag; }
  .btn     { @apply inline-flex items-center justify-center rounded-md border-2 border-asphalt px-4 py-2.5 text-base font-bold transition-colors disabled:opacity-50; }
  .btn-primary { @apply btn bg-danfo text-asphalt hover:bg-danfo-dark; }
  .btn-dark    { @apply btn bg-asphalt text-chalk hover:bg-asphalt-800; }
  .btn-quiet   { @apply btn border-asphalt-200 bg-white hover:border-asphalt; }
  .btn-danger  { @apply btn border-flag bg-white text-flag hover:bg-flag-soft; }
  .card    { @apply rounded-lg border-2 border-asphalt bg-white p-5; }
  /* The danfo stripe: a black band on yellow, used once in the header as the brand mark. */
  .stripe  { background: repeating-linear-gradient(90deg, #1C1D21 0 18px, #F6B800 18px 36px); height: 6px; }
}