/* ==========================================================================
   Layer 4: Base element styles — Pico-style defaults
   :where() scoped — component classes always win
   ========================================================================== */

:where(body) {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--text-md);
  color: var(--color-ink);
  background: var(--color-surface);
  letter-spacing: var(--tracking-body);
}

:where(h1) { font-size: var(--step-4); letter-spacing: var(--tracking-tight); line-height: var(--line-tight); font-weight: var(--weight-bold); }
:where(h2) { font-size: var(--step-3); letter-spacing: var(--tracking-snug); line-height: var(--line-tight); font-weight: var(--weight-bold); }
:where(h3) { font-size: var(--step-2); line-height: var(--line-snug); font-weight: var(--weight-semibold); }
:where(h4) { font-size: var(--step-1); line-height: var(--line-snug); font-weight: var(--weight-semibold); }
:where(h5) { font-size: var(--text-md); line-height: var(--line-snug); font-weight: var(--weight-semibold); }
:where(h6) { font-size: var(--step--1); line-height: var(--line-normal); font-weight: var(--weight-semibold); }

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--color-ink);
}

:where(p) { margin: 0; }

:where(a) {
  color: var(--color-primary);
  text-decoration: none;
}
:where(a:hover) { text-decoration: underline; }

:where(ul, ol) { margin: 0; padding: 0; list-style: none; }

:where(blockquote) {
  margin: 0;
  padding-inline-start: var(--space-m);
  border-inline-start: 3px solid var(--color-border);
  color: var(--color-ink-soft);
  font-style: italic;
}

:where(code) {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--neutral-100);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-xs);
}

:where(pre) {
  overflow-x: auto;
  padding: var(--space-m);
  background: var(--neutral-900);
  color: var(--neutral-100);
  border-radius: var(--radius-md);
}

:where(pre code) {
  background: none;
  padding: 0;
  font-size: var(--step--1);
}

:where(hr) {
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-border);
}

:where(mark) {
  background: var(--brand-50);
  padding: 0.125em 0.25em;
  border-radius: var(--radius-xs);
}

:where(kbd) {
  font-family: inherit;
  font-size: 0.875em;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-xs);
  padding: 0.125em 0.375em;
  box-shadow: 0 1px 0 var(--neutral-300);
}

:where(small) { font-size: var(--step--1); }

:where(figure) { margin: 0; }
:where(figcaption) { font-size: var(--step--1); color: var(--color-ink-soft); margin-top: var(--space-2xs); }

:where(table) { border-collapse: collapse; width: 100%; }
:where(th, td) { padding: var(--space-xs) var(--space-s); text-align: start; border-bottom: 1px solid var(--color-border-soft); }
:where(th) { font-weight: var(--weight-semibold); color: var(--color-ink); }

:where(details) { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-s) var(--space-m); }
:where(summary) { cursor: pointer; font-weight: var(--weight-semibold); }

:where(dialog) {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
  max-width: min(90vw, 32rem);
  box-shadow: var(--shadow-xl);
}
:where(dialog::backdrop) { background: rgb(0 0 0 / 0.4); }

:where(label) { display: block; font-weight: var(--weight-medium); font-size: var(--step--1); margin-bottom: var(--space-3xs); }

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  display: block;
  width: 100%;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color var(--transition-fast);
}

:where(input:focus, select:focus, textarea:focus) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

:where(fieldset) { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-m); margin: 0; }
:where(legend) { font-weight: var(--weight-semibold); padding-inline: var(--space-2xs); }