/* ==========================================================================
 * base.css — the reset and base element styling for the design system.
 *
 * Split out of tokens.css so that tokens.css can be loaded by ANY page without
 * restyling it. These rules select bare elements (body, h1–h4, p, a, img/svg),
 * so they only belong on pages built ON the design system.
 *
 *   public pages (index, login)  tokens.css + base.css + components.css
 *   the app (app.html)           tokens.css only — styles.css owns its reset
 *
 * Loading this into the app would reflow it: measured on the real views, the
 * bare-element rules below changed 50.7% of elements (1320 of them resized),
 * because styles.css has no h1–h4/p rules of its own and inherits the browser
 * defaults these replace. Keep the boundary: tokens.css never styles an element
 * you did not opt into; base.css is where the opting-in happens.
 *
 * Load AFTER tokens.css (it consumes the tokens) and BEFORE components.css.
 * ========================================================================== */

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

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

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-stretch: var(--wdth-display);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-lg); font-weight: 600; }
p  { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
a:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--r-sm); }

:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }

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

/* Keep browser-autofilled fields on-theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--fg);
  transition: background-color 9999s ease-in-out 0s;
}

@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;
  }
}