@import 'tailwindcss';
@import '../design-system/tokens.css';

html {
  scroll-behavior: smooth;
  font-size: 17px;
}

body {
  /* Match the last visible section on the home page (cream) so browser
     overscroll + any empty space below content blends with the banner
     instead of showing a seam. Design-system pages override with
     `bg-surface` on their own root wrapper, so they're unaffected. */
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.55;
}

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Room above anchor targets when scrolling */
[id] {
  scroll-margin-top: 2rem;
}

/* Typography helpers */
.font-display {
  font-family: var(--font-serif);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
}