/* ============================================================
   xmesh DS · _base-typography.css — opt-in raw-HTML typography.

   Styles a consumer's raw `<h1>`…`<p>`/`<a>`/`<ul>`/`<code>` from the
   type + color token contract, but ONLY under a `[data-xm-base]`
   ancestor (ADR 0011, spine AD-3/AD-3a) — so importing the baseline
   never restyles existing consumer markup until they opt a subtree in.
   Sourced only from `--t-*` type roles + `--md-sys-color-*`; no raw
   colors, no raw spacing px. Imported into @layer base by
   styles/base.css.
   ============================================================ */

[data-xm-base] {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--t-body);
}

[data-xm-base] h1 { font: var(--t-h1); letter-spacing: var(--t-tracking-tight); }
[data-xm-base] h2 { font: var(--t-h2); letter-spacing: var(--t-tracking-tight); }
[data-xm-base] h3 { font: var(--t-h3); letter-spacing: var(--t-tracking-snug); }
[data-xm-base] h4 { font: var(--t-h4); letter-spacing: var(--t-tracking-snug); }
[data-xm-base] h5 { font: var(--t-body-strong); }
[data-xm-base] h6 {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--t-tracking-wide);
  color: var(--md-sys-color-on-surface-variant);
}

[data-xm-base] :is(h1, h2, h3, h4, h5, h6) {
  margin-block: var(--s-6) var(--s-3);
}
[data-xm-base] :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

[data-xm-base] p { font: var(--t-body); margin-block: var(--s-3); }
[data-xm-base] small { font: var(--t-small); color: var(--md-sys-color-on-surface-variant); }

[data-xm-base] strong,
[data-xm-base] b { font-weight: var(--t-weight-semibold); }

[data-xm-base] a {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
[data-xm-base] a:hover { text-decoration-thickness: 2px; }

[data-xm-base] :is(ul, ol) {
  margin-block: var(--s-3);
  padding-inline-start: var(--s-6);
}
[data-xm-base] li { margin-block: var(--s-1); }

[data-xm-base] :is(code, kbd, samp) {
  font: var(--t-mono);
  background: var(--md-sys-color-surface-container);
  padding: var(--s-0-5) var(--s-1-5);
  border-radius: var(--md-sys-shape-corner-extra-small);
}
[data-xm-base] pre {
  font: var(--t-mono);
  background: var(--md-sys-color-surface-container);
  padding: var(--s-4);
  border-radius: var(--md-sys-shape-corner-small);
  overflow: auto;
}
[data-xm-base] pre code {
  background: none;
  padding: 0;
}

[data-xm-base] blockquote {
  margin-block: var(--s-4);
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}

[data-xm-base] hr {
  border: none;
  border-block-start: 1px solid var(--md-sys-color-outline-variant);
  margin-block: var(--s-6);
}