/**
 * Fluid Zero - base
 * @layer base
 *
 * Native elements only. Every selector is :where(), so any later rule wins.
 * The reset zeroes margins; the flow below puts them back, once.
 */

@layer base {
  :where(:root) {
    accent-color: var(--accent);
  }

  :where(body) {
    padding-inline: calc(var(--space-gutter) / 2);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.95rem + 0.25vi, 1.125rem);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
  }

  /* Flow: space after each block; more above a heading than below it. */
  :where(p, ul, ol, dl, blockquote, pre, figure, table, hr, form, fieldset, details, address, h1, h2, h3, h4, h5, h6) {
    margin-block: 0 1em;
  }
  :where(* + h1, * + h2, * + h3, * + h4, * + h5, * + h6) {
    margin-block-start: 1.75em;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
    font-size: 1em;
    font-weight: 700;
    line-height: 1.15;
    margin-block-end: 0.5em;
  }
  :where(h1) { font-size: clamp(2rem, 1.6667rem + 1.4815vi, 3rem); }        /* 32 → 48 */
  :where(h2) { font-size: clamp(1.5rem, 1.3333rem + 0.7407vi, 2rem); }      /* 24 → 32 */
  :where(h3) { font-size: clamp(1.25rem, 1.1667rem + 0.3704vi, 1.5rem); }   /* 20 → 24 */

  :where(p, li, dd, blockquote, figcaption) {
    max-inline-size: var(--measure);
  }
  :where(dt) { font-weight: 600; }
  :where(dd) { margin-inline-start: 1.5em; }

  :where(a) {
    color: var(--accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
  }
  :where(a:hover) { text-decoration-thickness: 0.12em; }

  :where(blockquote) {
    padding-inline-start: 1em;
    border-inline-start: 3px solid var(--color-border-strong);
  }

  :where(code, kbd, samp, pre) {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
  :where(:not(pre) > code, pre) {
    background-color: var(--color-surface);
  }
  :where(:not(pre) > code) { padding: 0.1em 0.3em; }
  :where(pre) {
    padding: 1em;
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border);
  }

  :where(hr) {
    border: 0;
    border-block-start: var(--border-width) solid var(--color-border);
    margin-block: 2em;
  }

  :where(figure img) { inline-size: 100%; }
  :where(figcaption) {
    margin-block-start: 0.5em;
    font-size: 0.875em;
    color: var(--color-text-muted);
  }

  :where(table) { inline-size: 100%; }
  :where(th) { text-align: start; }
  :where(th, td) {
    padding: 0.5em 0.75em 0.5em 0;
    border-block-end: var(--border-width) solid var(--color-border);
  }

  :where(legend, label) { font-weight: 600; }

  /* Fields: every text-like input, select and textarea. */
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="reset"], [type="button"], [type="image"]), select, textarea) {
    min-block-size: 2.75rem;
    padding: 0.5em 0.75em;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background-color: var(--color-background);
  }
  :where(input, select, textarea):focus-visible { outline-offset: 1px; }
  :where(input, select, textarea):user-invalid { border-color: var(--color-error); }
  :where(input:is([type="checkbox"], [type="radio"])) {
    inline-size: 1.25em;
    block-size: 1.25em;
    vertical-align: -0.25em;
  }

  :where(button, [type="submit"], [type="reset"], [type="button"]) {
    min-block-size: 2.75rem;
    padding: 0.5em 1.25em;
    border: var(--border-width) solid var(--accent);
    border-radius: var(--radius-control);
    background-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    cursor: pointer;
  }

  :where(:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }

  :where([data-bg="tinted"]) {
    padding: 1.5rem;
    background-color: var(--color-surface);
  }

  :where(.sr-only) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :where(.skip-link) {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.5em 1em;
    background-color: var(--color-background);
    translate: 0 -200%;
  }
  :where(.skip-link:focus) { translate: none; }

  /* Dialog and fieldset: the reset strips their edge, so give it back. */
  :where(dialog, fieldset) {
    border: var(--border-width) solid var(--color-border-strong);
    padding: 1em;
  }
  :where(dialog) {
    color: var(--color-text);
    background-color: var(--color-background);
  }

  /* No !important: an important rule in this early layer would beat every
     child theme. Browsers drop backgrounds in print on their own. */
  @media print {
    :where(*) { color: #000; }
  }
}