/* Layer order is declared once, here, because reset.css loads first.
   Every stylesheet wraps its rules in one of these layers, which means
   load order decides the cascade instead of selector specificity. */
@layer reset, tokens, layout, components, animations;

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

  * {
    margin: 0;
  }

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

  body {
    min-height: 100svh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  button:disabled {
    cursor: not-allowed;
  }

  h1,
  h2,
  h3,
  h4 {
    font-size: inherit;
    font-weight: inherit;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  ul,
  ol {
    list-style: none;
    padding: 0;
  }

  a {
    color: inherit;
  }

  /* Visible focus everywhere, but only for keyboard traversal. 2px rather than
     the siblings' 3px: this design has no other heavy stroke on it, so 3px reads
     as a border that arrived by accident. */
  :focus-visible {
    outline: var(--stroke) solid var(--lane-you);
    outline-offset: 3px;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  [hidden] {
    display: none !important;
  }

  /* Accessible-only text: announced by screen readers, invisible on screen. */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}