/*
 * The reset and the baseline: what every surface gets before a single
 * component is used, and the only place the kit styles a bare element.
 *
 * Element rules are written with :where(), so they carry no specificity and
 * a consumer overrides them with one plain selector and no fight. The focus
 * ring is the exception a design may only recolour, through
 * --nv-color-border-focus; a :focus-visible rule in a consumer's own CSS
 * fails conformance, because a ring that varies by surface is a ring nobody
 * learns to see.
 */

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

  :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  :where(ul, ol)[role='list'] {
    padding: 0;
    margin: 0;
    list-style: none;
  }

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

  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
  }

  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }
}

@layer nv.base {
  :root {
    scrollbar-width: thin;
    scrollbar-color: var(--nv-color-scroll-thumb) transparent;
  }

  *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: transparent;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: var(--nv-color-scroll-thumb);
    border-radius: 3px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: var(--nv-color-scroll-thumb-hover);
  }

  *::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* The surface paints its own ground. A transparent body borrows whatever
     is behind it, which is a different colour on every host. */
  :where(body) {
    background: var(--nv-color-bg);
    color: var(--nv-color-fg-body);
    font-family: var(--nv-font-sans);
    font-size: var(--nv-text-base);
    line-height: var(--nv-leading-normal);
    -webkit-text-size-adjust: 100%;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    color: var(--nv-color-fg);
    font-family: var(--nv-font-display);
    font-weight: var(--nv-weight-semi);
    line-height: var(--nv-leading-tight);
    text-wrap: balance;
  }

  :where(h1) {
    font-size: var(--nv-text-4xl);
    letter-spacing: -0.02em;
  }

  :where(h2) {
    font-size: var(--nv-text-3xl);
    letter-spacing: -0.015em;
  }

  :where(h3) {
    font-size: var(--nv-text-2xl);
  }

  :where(h4) {
    font-size: var(--nv-text-xl);
  }

  :where(h5) {
    font-size: var(--nv-text-lg);
  }

  :where(h6) {
    font-size: var(--nv-text-base);
  }

  :where(a) {
    color: var(--nv-color-link);
    text-underline-offset: 0.15em;
  }

  :where(a:hover) {
    color: var(--nv-color-link-hover);
  }

  :where(code, kbd, samp, pre) {
    font-family: var(--nv-font-mono);
    font-size: 0.9em;
  }

  :where(hr) {
    height: 1px;
    border: 0;
    background: var(--nv-color-border);
  }

  /* Selection is the accent's quietest wash, once, so no surface invents one
     and none is left with the engine's blue on a warm ground. */
  ::selection {
    background: var(--nv-color-accent-subtle);
    color: var(--nv-color-fg);
  }

  :focus-visible {
    outline: 2px solid var(--nv-color-border-focus);
    outline-offset: 2px;
  }

  .nv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}