/* flawless base — reset + token hookup + the accessibility defaults every mockup needs.
   Copy next to tokens.css and load both. Nothing here decides the look; tokens.css does. */

/* Everything below lives in the `base` cascade layer, so any unlayered rule or a later layer
   (`@layer components { … }`) wins without specificity games. Declare your order once, before this file:
   @layer reset, tokens, base, layout, components, utilities; */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    min-height: 100dvh;
    font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-size: var(--text-base, 1rem);
    line-height: var(--leading-base, 1.5);
    color: var(--text, #1a1a1a);
    background: var(--bg, #fff);
    font-optical-sizing: auto;   /* no global -webkit-font-smoothing: it thins stems; scope it to light-on-dark display type */
  }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4 { font-family: var(--font-display, inherit); font-weight: var(--weight-display, 600); text-wrap: balance; overflow-wrap: anywhere; }
  p, li, dd { text-wrap: pretty; max-width: var(--measure, 65ch); }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

  /* Focus: visible, offset, never removed. */
  :focus-visible { outline: 2px solid var(--focus, var(--primary, #0056cf)); outline-offset: 2px; border-radius: var(--radius-sm, 6px); }
  :focus:not(:focus-visible) { outline: none; }

  /* Motion: respect the user. Animations elsewhere should be authored under this same guard. */
  @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; }
  }

  /* Utilities that are structural, not stylistic. */
  .container { width: 100%; max-width: var(--container, 75rem); margin-inline: auto; padding-inline: var(--space-gutter, 1rem); }
  .measure { max-width: var(--measure, 65ch); }
  .tabular { font-variant-numeric: tabular-nums; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .safe-top { padding-top: max(var(--space-5, 1rem), env(safe-area-inset-top)); }
  .safe-bottom { padding-bottom: max(var(--space-5, 1rem), env(safe-area-inset-bottom)); }
  .stack > * + * { margin-block-start: var(--stack, var(--space-5, 1rem)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, var(--space-3, .5rem)); align-items: center; }

  /* Icon sizing convention: icons sit on a 24px optical grid and inherit text color. */
  .icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
}