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

@import "../styles/tokens.css";

@layer base {
  * {
    @apply border-line;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-bg text-ink font-sans text-body-md antialiased;
  }

  h1, h2, h3, h4 {
    @apply font-display font-normal text-ink;
    text-wrap: balance;
  }

  ::selection {
    @apply bg-primary/20 text-ink;
  }

  :focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-bg;
  }
}

@layer utilities {
  .container {
    @apply mx-auto w-full;
  }

  /**
   * Sprint 7 — a near-invisible dot grid, not a new color: it reuses the existing
   * ink token at 3% opacity purely to make the already-alternating bg/paper section
   * rhythm perceptible (those two tokens differ by only a few RGB values). Applied
   * to alternating homepage sections only, never as a load-bearing visual on its own.
   */
  .section-texture {
    background-image: radial-gradient(rgb(var(--color-ink) / 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}