/*
 * THE RESET — scoped to elements the kit actually renders, and subtractive but
 * for one line.
 *
 * No global element selector, ever: a kit that resets `button` reshapes YOUR
 * buttons, which is the exact damage a consumer reset does to us. Anything a
 * component needs beyond these declarations belongs in its own stylesheet.
 *
 * The exception is `font-variant-numeric`: it is the one type property a
 * component sheet does NOT state, so it inherits from the page. Stating the
 * kit's own numerals here is the subtraction — it takes the page's answer back
 * off the kit's elements without reaching one the kit does not render.
 *
 * The BORDER and the UNDERLINE are the same subtraction: `render` puts a
 * `<button>` or an `<a>` — and the user agent's `2px outset`, and its underline
 * on every link — under ANY part of the kit, so per-component is incomplete by
 * construction. A component that MEANS to draw a line still does:
 * `lotics.components` outranks this layer.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.reset {
  [class^="lotics-"],
  [class*=" lotics-"] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    font-variant-numeric: var(--lotics-font-numeric);
  }
}