@layer resets {

  /* ── BOX MODEL ──────────────────────────────────────────────────────── */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* ── KERNING ────────────────────────────────────────────────────────── */
  *, *::before, *::after {
    font-feature-settings: "kern";
    -webkit-font-kerning: normal;
    font-kerning: normal;
  }

  /* ── FONT INHERITANCE ON FORM ELEMENTS ─────────────────────────────── */
  input, select, textarea, button {
    font: inherit;
  }

  /* ── IMAGES ─────────────────────────────────────────────────────────── */
  img, svg, video {
    max-inline-size: 100%;
    block-size: auto;
  }

  svg { fill: currentcolor; }

  /* ── MOTION ─────────────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    :root { scroll-behavior: smooth; }
  }

  /* ── FONT SMOOTHING (dark backgrounds only) ─────────────────────────── */
  @media (prefers-color-scheme: dark) {
    *, *::before, *::after {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
    }
  }

}