/*
 * Application manifest. `stylesheet_link_tag :app` includes every file in
 * app/assets/stylesheets, so this holds the reset and element defaults only.
 *
 *   design_tokens.css  — the colour / type / spacing / radius variables
 *   components.css     — reusable chrome (buttons, cards, header, footer)
 *   pages.css          — section rhythm and responsive behaviour
 *
 * Never write a raw hex value outside design_tokens.css.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  font: var(--text-body-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--color-primary-ink); }

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--rounded-xs);
}

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