@scope (text-ui) {
  :where(:scope) {
    /* ── Tokens (body defaults) ── */
    --text-family:    var(--a-body-family);
    --text-weight:    var(--a-weight);
    --text-weight-strong:    var(--a-weight-semibold);
    --text-size:      var(--a-body-size);
    --text-leading:   var(--a-body-leading);
    --text-tracking:  var(--a-body-tracking);
    --text-case:      var(--a-body-case);
    --text-color:     var(--a-fg);
    --text-color-strong:     var(--a-fg-strong);
  }

  :scope {
    box-sizing: border-box;
    display: inline;
    font-family: var(--text-family);
    font-weight: var(--text-weight);
    font-size: var(--text-size);
    line-height: var(--text-leading);
    letter-spacing: var(--text-tracking);
    text-transform: var(--text-case);
    color: var(--text-color);
  }

  /* Reset native heading styles inside text-ui so the variant controls the look */
  :is(h1, h2, h3, h4, h5, h6) {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
  }

  :scope[strong], :is(strong) {
    --text-weight: var(--text-weight-strong);
    --text-color: var(--text-color-strong);
  }

  /* ── Variants ── */
  :scope[variant="body"]       { --text-family: var(--a-body-family);    --text-weight: var(--a-body-weight);    --text-size: var(--a-body-size);    --text-leading: var(--a-body-leading);    --text-tracking: var(--a-body-tracking);    --text-case: var(--a-body-case);    --text-color: var(--a-fg); }
  :scope[variant="display"]    { --text-family: var(--a-display-family); --text-weight: var(--a-display-weight); --text-size: var(--a-display-size); --text-leading: var(--a-display-leading); --text-tracking: var(--a-display-tracking); --text-case: var(--a-display-case); --text-color: var(--a-display-color); }
  :scope[variant="title"]      { --text-family: var(--a-title-family);   --text-weight: var(--a-title-weight);   --text-size: var(--a-title-size);   --text-leading: var(--a-title-leading);   --text-tracking: var(--a-title-tracking);   --text-case: var(--a-title-case);   --text-color: var(--a-title-color); }
  :scope[variant="heading"]    { --text-family: var(--a-heading-family); --text-weight: var(--a-heading-weight); --text-size: var(--a-heading-size); --text-leading: var(--a-heading-leading); --text-tracking: var(--a-heading-tracking); --text-case: var(--a-heading-case); --text-color: var(--a-heading-color); }
  :scope[variant="section"]    { --text-family: var(--a-section-family); --text-weight: var(--a-section-weight); --text-size: var(--a-section-size); --text-leading: var(--a-section-leading); --text-tracking: var(--a-section-tracking); --text-case: var(--a-section-case); --text-color: var(--a-section-color); }
  :scope[variant="caption"]    { --text-family: var(--a-caption-family); --text-weight: var(--a-caption-weight); --text-size: var(--a-caption-size); --text-leading: var(--a-caption-leading); --text-tracking: var(--a-caption-tracking); --text-case: var(--a-caption-case); --text-color: var(--a-caption-color); }
  :scope[variant="label"]      { --text-family: var(--a-label-family);   --text-weight: var(--a-label-weight);   --text-size: var(--a-label-size);   --text-leading: var(--a-label-leading);   --text-tracking: var(--a-label-tracking);   --text-case: var(--a-label-case);   --text-color: var(--a-label-color); }
  :scope[variant="kicker"]     { --text-family: var(--a-kicker-family);  --text-weight: var(--a-kicker-weight);  --text-size: var(--a-kicker-size);  --text-leading: var(--a-kicker-leading);  --text-tracking: var(--a-kicker-tracking);  --text-case: uppercase;             --text-color: var(--a-kicker-color); }
  :scope[variant="code"]       { --text-family: var(--a-code-family);    --text-weight: var(--a-code-weight);    --text-size: var(--a-code-size);    --text-leading: var(--a-code-leading);    --text-tracking: var(--a-code-tracking);    --text-case: var(--a-code-case);    --text-color: var(--a-code-color); }

  /* §210 (v0.5.7, FEEDBACK-17 §1): three token-backed variants whose
     `--a-<role>-{family,weight,leading,tracking,case,color,size}` tokens
     ship in `styles/typography.css` but had no matching :scope rule —
     authoring `<text-ui variant="subsection|deck|metric">` per the
     documented yaml enum silently rendered as `body` defaults. The
     `subheading` + `h1`–`h6` enum entries are deliberately omitted from
     this batch: their tokens don't ship anywhere (verified in this same
     arc), so the enum entries are retired from text.yaml / text.d.ts /
     text.a2ui.json. */
  :scope[variant="subsection"] { --text-family: var(--a-subsection-family); --text-weight: var(--a-subsection-weight); --text-size: var(--a-subsection-size); --text-leading: var(--a-subsection-leading); --text-tracking: var(--a-subsection-tracking); --text-case: var(--a-subsection-case); --text-color: var(--a-subsection-color); }
  :scope[variant="deck"]       { --text-family: var(--a-deck-family);       --text-weight: var(--a-deck-weight);       --text-size: var(--a-deck-size);       --text-leading: var(--a-deck-leading);       --text-tracking: var(--a-deck-tracking);       --text-case: var(--a-deck-case);       --text-color: var(--a-deck-color); }
  :scope[variant="metric"]     { --text-family: var(--a-metric-family);     --text-weight: var(--a-metric-weight);     --text-size: var(--a-metric-size);     --text-leading: var(--a-metric-leading);     --text-tracking: var(--a-metric-tracking);     --text-case: var(--a-metric-case);     --text-color: var(--a-metric-color); }

  /* ── v0.6.18 (FB-10) — finer-control overrides on top of `variant` ──
     The skill always documented an overlay API (color="subtle",
     size="sm", weight="semibold", text-align="center"). Pre-v0.6.18 these
     attributes existed only as documentation — text-ui ignored them and
     rendered the variant default. v0.6.18 implements them as attribute
     selectors that override the `--text-*` CSS variables set by [variant].
     Each is intentionally permissive: unknown values fall back to the
     variant's value rather than throwing. Authoring `<text-ui color="...">`
     with an unknown color = no-op (variant color wins). */

  /* size — sm | md | lg (md is the body default ~15-16px) */
  :scope[size="sm"]  { --text-size: var(--a-body-sm); }
  :scope[size="md"]  { --text-size: var(--a-body-md); }
  :scope[size="lg"]  { --text-size: var(--a-body-lg); }

  /* color — default | subtle | strong | accent | danger | success | warning
     (no value = variant default; "default" is an explicit reset). */
  :scope[color="default"] { --text-color: var(--a-fg); }
  :scope[color="subtle"]  { --text-color: var(--a-fg-muted); }
  :scope[color="strong"]  { --text-color: var(--a-fg-strong); }
  :scope[color="accent"]  { --text-color: var(--a-accent); }
  :scope[color="danger"]  { --text-color: var(--a-danger-bg); }
  :scope[color="success"] { --text-color: var(--a-success-bg); }
  :scope[color="warning"] { --text-color: var(--a-warning-bg); }

  /* weight — regular | medium | semibold | bold */
  :scope[weight="regular"]  { --text-weight: var(--a-weight); }
  :scope[weight="medium"]   { --text-weight: var(--a-weight-medium); }
  :scope[weight="semibold"] { --text-weight: var(--a-weight-semibold); }
  :scope[weight="bold"]     { --text-weight: var(--a-weight-bold); }

  /* text-align — start | center | end | justify */
  :scope[text-align="start"]   { text-align: start; }
  :scope[text-align="center"]  { text-align: center; }
  :scope[text-align="end"]     { text-align: end; }
  :scope[text-align="justify"] { text-align: justify; }
  /* Note: `<text-ui>` defaults to display:inline. text-align only takes
     effect when text-ui itself is block-like (e.g. via wrapping or a
     `display: block`/`grid` parent). The override-attribute pattern keeps
     the inline default but lets consumers flip alignment with one attr. */

  /* ── Truncation (single-line) ── */
  :scope[truncate] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Line clamp (multi-line) ── */
  :scope[lines]:not([lines="0"]) {
    display: -webkit-box;
    -webkit-line-clamp: var(--_text-lines, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
