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

html {
  /* No global `scroll-behavior: smooth` — only same-route hash
     anchors (handled in `router.scrollBehavior`) smooth-scroll.
     Cross-route navigations and back/forward jumps are instant. */
  font-size: 17px;
  /* Runtime-measured navbar height. Default matches the standard
     Navbar variant at lg (py-5 + logo + border) so the home-page
     first-fold wrapper can use `calc(100svh - var(--nav-h))` from
     first paint. HomePage still refines this at mount via a
     ResizeObserver for pixel-exact fit, but the default prevents a
     ~nav-height layout shift between first paint and hydration. */
  --nav-h: 68px;
}

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 — must clear the sticky
   navbar. The navbar is taller on md+ (logo scales up), so the value
   bumps up at the md breakpoint. */
[id] {
  scroll-margin-top: 5.5rem;
}
@media (min-width: 768px) {
  [id] {
    scroll-margin-top: 7rem;
  }
}

/* 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);
}
