@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Quicksand:wght@300;400;500;600;700&display=swap");
@import "tailwindcss";

/* Mirrors planning/architecture/design-system/MASTER.md. Keep both in sync. */
@theme {
  --color-smarts-primary: #dc2626;
  --color-smarts-secondary: #ef4444;
  --color-smarts-cta: #fbbf24;
  --color-smarts-bg: #fef2f2;
  --color-smarts-ink: #7f1d1d;

  --font-display: "Baloo 2", system-ui, sans-serif;
  --font-body: "Quicksand", system-ui, sans-serif;
}

@layer components {
  .flash-toast {
    animation: flash-toast-dismiss 5s ease forwards;
  }

  .smarts-button {
    @apply inline-flex min-h-11 items-center justify-center rounded-lg px-4 pb-2 pt-3 font-display font-bold leading-none transition;
  }
}

@keyframes flash-toast-dismiss {
  0%, 78% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  100% {
    opacity: 0;
    transform: translateY(-0.25rem);
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flash-toast {
    animation-duration: 1ms;
    animation-delay: 5s;
  }
}