@adia-ai/web-components 0.6.47 → 0.6.49

package/styles/typography.css

@@ -52,812 +52,14 @@
      L1 Primitives → L2 Semantics → L3 Roles → L4 Components
    ═══════════════════════════════════════════════════════════════ */
 
-@import "./fonts.css";
-
-:root {
-  /* ═══════════════════════════════════════════════════════════
-     L1 PRIMITIVES — raw values, no intent
-     ═══════════════════════════════════════════════════════════ */
-
-  /* ── Font families ── */
-
-  /*--a-font-family-sans:     var(--a-font-gt-standard);*/
-  /*--a-font-family-mono:     var(--a-font-gt-standard-mono);*/
-  /*--a-font-family-sans:     var(--a-font-neu-montreal-sans);*/
-  /*--a-font-family-mono:     var(--a-font-neu-montreal-mono);*/
-  --a-font-family-display: var(--a-font-family-sans);
-  --a-font-family-text: var(--a-font-family-sans);
-  --a-font-family-heading: var(--a-font-family-sans);
-  --a-font-family-ui: var(--a-font-family-sans);
-  --a-font-family-code: var(--a-font-family-mono);
-  --a-font-family-control: var(--a-font-family-mono);
-  --a-font-family: var(--a-font-family-sans);
-  --a-font-family-text: var(--a-font-family-sans);
-
-  /* ── Type scale ──
-      Ratio: ~1.25 (major third) with dramatic hero jump.
-      Base: 0.875rem (14px).
-      Spec ref: hero 72px (weight 300), stat values 28px, section labels 13px,
-      overline 11px, body 14px, caption 12px. */
-  /* UI type scale now defined as --a-ui-size-* in tokens.css */
-
-  /* Content sizes live in role tokens below:
-     --a-body-size, --a-heading-size, --a-display-size, etc.
-     No flat --a-font-xs/sm/md/lg scale — use role tokens directly. */
-
-  /* ── Font weight — single canonical scale ──
-     Conventional weights: thin=100, light=300, normal=400, medium=500,
-     semibold=600, bold=700. Fonts must provide these axes or fall back
-     gracefully. Earlier --a-font-weight-* aliases were REMOVED in v0.5.0;
-     use --a-weight-* directly. (v0.5.8 §230 closed 3 consumer references
-     that still pointed at the removed family per FEEDBACK-20 §1.) */
-  --a-weight-thin: 100;
-  --a-weight-light: 300;
-  --a-weight-normal: 400;
-  --a-weight-medium: 500;
-  --a-weight-semibold: 600;
-  --a-weight-bold: 700;
-  --a-weight: var(--a-weight-normal);
-
-  /* ── Line height ── */
-  --a-leading-none: 1; /* hero numbers — no extra space at display scale */
-  --a-leading-tight: 1.2; /* headings, large text */
-  --a-leading-snug: 1.3; /* labels, compact UI text */
-  --a-leading-normal: 1.5; /* body text, readable paragraphs */
-
-  /* ── Letter spacing ── */
-  --a-tracking-tighter: -0.02em; /* hero/display numbers */
-  --a-tracking-tight: -0.01em; /* stat values, large text */
-  --a-tracking-normal: 0; /* body text */
-  --a-tracking-wide: 0.04em; /* stat units, small uppercase */
-  --a-tracking-wider: 0.06em; /* section labels, overlines */
-
-  /* ── Leading curve (tightens as size grows) ── */
-  --a-font-leading-tight: 1.05;
-  --a-font-leading-snug: 1.2;
-  --a-font-leading-normal: 1.35;
-  --a-font-leading-relaxed: 1.5;
-  --a-font-leading-loose: 1.6;
-
-  /* ── Tracking curve (negative at display, positive at caption) ── */
-  --a-font-tracking-tight: -0.03em;
-  --a-font-tracking-snug: -0.015em;
-  --a-font-tracking-normal: 0;
-  --a-font-tracking-wide: 0.04em;
-  --a-font-tracking-wider: 0.06em;
-
-  /* ═══════════════════════════════════════════════════════════
-     L2 SEMANTIC — intent tokens referencing primitives
-     ═══════════════════════════════════════════════════════════ */
-
-  /* ── Families by intent ── */
-  --a-font-family-heading: var(--a-font-family-display);
-  --a-font-family-body: var(--a-font-family-text);
-  --a-font-family-ui: var(--a-font-family-text);
-  --a-font-family-editorial: var(--a-font-family-sans);
-
-  /* ═══════════════════════════════════════════════════════════
-     L3 ROLES — 13 roles across 6 jobs
-     Each role: family, weight, size, leading, tracking, case, color,
-                margin-block-start, margin-block-end
-     ═══════════════════════════════════════════════════════════ */
-
-  /* ──────────────────────────────────────
-     ANNOUNCE — declare what this is
-     ────────────────────────────────────── */
-
-  /* display — hero headlines, one per page, largest expression */
-  --a-display-family: var(--a-font-family-display);
-  --a-display-weight: var(--a-weight-bold);
-  --a-display-sm: clamp(22px, 20px + 1vw, 31px);
-  --a-display-md: clamp(29px, 24px + 1.5vw, 39px);
-  --a-display-lg: clamp(37px, 31px + 2vw, 52px);
-  --a-display-size: var(--a-display-sm);
-  --a-display-leading: var(--a-font-leading-tight);
-  --a-display-tracking: var(--a-font-tracking-tight);
-  --a-display-case: normal;
-  --a-display-color: var(--a-fg-strong);
-  --a-display-mbs: 0;
-  --a-display-mbe: 0.3em;
-
-  /* title — page/article canonical name, restrained vs display */
-  --a-title-family: var(--a-font-family-display);
-  --a-title-weight: var(--a-weight-bold);
-  --a-title-sm: clamp(20px, 18px + 0.375vw, 28px);
-  --a-title-md: clamp(24px, 20px + 0.5vw, 32px);
-  --a-title-lg: clamp(28px, 24px + 1vw, 36px);
-  --a-title-size: var(--a-title-sm);
-  --a-title-leading: var(--a-font-leading-snug);
-  --a-title-tracking: var(--a-font-tracking-snug);
-  --a-title-case: normal;
-  --a-title-color: var(--a-fg-strong);
-  --a-title-mbs: 0;
-  --a-title-mbe: 0.4em;
-
-  /* heading — h2-equivalent, primary content division */
-  --a-heading-family: var(--a-font-family-heading);
-  --a-heading-weight: var(--a-weight-bold);
-  --a-heading-sm: 16px;
-  --a-heading-md: 17px;
-  --a-heading-lg: 18px;
-  --a-heading-size: var(--a-heading-sm);
-  --a-heading-leading: var(--a-font-leading-snug);
-  --a-heading-tracking: var(--a-font-tracking-normal);
-  --a-heading-case: normal;
-  --a-heading-color: var(--a-fg-strong);
-  --a-heading-mbs: 1.5em;
-  --a-heading-mbe: 0.5em;
-
-  /* ──────────────────────────────────────
-     ORIENT — tell the reader where they are
-     ────────────────────────────────────── */
-
-  /* kicker — short label above a title (eyebrow/overline) */
-  --a-kicker-family: var(--a-font-family-ui);
-  --a-kicker-weight: var(--a-weight-semibold);
-  --a-kicker-sm: 11px;
-  --a-kicker-md: 12px;
-  --a-kicker-lg: 13px;
-  --a-kicker-size: var(--a-kicker-md);
-  --a-kicker-leading: var(--a-font-leading-normal);
-  --a-kicker-tracking: var(--a-font-tracking-wider);
-  --a-kicker-case: uppercase;
-  --a-kicker-color: var(--a-fg-muted);
-  --a-kicker-mbs: 0;
-  --a-kicker-mbe: 0.5em;
-
-  /* label — UI labels, form fields, badges, tabs */
-  --a-label-family: var(--a-font-family-ui);
-  --a-label-weight: var(--a-weight-medium);
-  --a-label-sm: 11px;
-  --a-label-md: 12px;
-  --a-label-lg: 13px;
-  --a-label-size: var(--a-label-md);
-  --a-label-leading: var(--a-font-leading-normal);
-  --a-label-tracking: var(--a-font-tracking-wide);
-  --a-label-case: normal;
-  --a-label-color: var(--a-fg);
-  --a-label-mbs: 0;
-  --a-label-mbe: 0.25em;
-
-  /* caption — figure captions, metadata, timestamps */
-  --a-caption-family: var(--a-font-family-text);
-  --a-caption-weight: var(--a-weight-normal);
-  --a-caption-sm: 13px;
-  --a-caption-md: 14px;
-  --a-caption-lg: 15px;
-  --a-caption-size: var(--a-caption-md);
-  --a-caption-leading: var(--a-font-leading-relaxed);
-  --a-caption-tracking: var(--a-font-tracking-wide);
-  --a-caption-case: normal;
-  --a-caption-color: var(--a-fg-subtle);
-  --a-caption-mbs: 0.5em;
-  --a-caption-mbe: 0;
-
-  /* ──────────────────────────────────────
-     ENTICE — pull the reader in
-     ────────────────────────────────────── */
-
-  /* deck — summary sentence(s) below a title */
-  --a-deck-family: var(--a-font-family-sans);
-  --a-deck-weight: var(--a-weight-normal);
-  --a-deck-sm: 17px;
-  --a-deck-md: 18px;
-  --a-deck-lg: 20px;
-  --a-deck-size: var(--a-deck-md);
-  --a-deck-leading: var(--a-font-leading-relaxed);
-  --a-deck-tracking: var(--a-font-tracking-normal);
-  --a-deck-case: normal;
-  --a-deck-color: var(--a-fg-subtle);
-  --a-deck-mbs: 0;
-  --a-deck-mbe: 1.5em;
-
-  /* ──────────────────────────────────────
-     DIVIDE — break flow into chunks
-     ────────────────────────────────────── */
-
-  /* section — h2/h3, major division within content */
-  --a-section-family: var(--a-font-family-heading);
-  --a-section-weight: var(--a-weight-semibold);
-  --a-section-sm: 16px;
-  --a-section-md: 17px;
-  --a-section-lg: 19px;
-  --a-section-size: var(--a-section-sm);
-  --a-section-leading: var(--a-font-leading-normal);
-  --a-section-tracking: var(--a-font-tracking-normal);
-  --a-section-case: normal;
-  --a-section-color: var(--a-fg-strong);
-  --a-section-mbs: 2em;
-  --a-section-mbe: 0.5em;
-
-  /* subsection — h3/h4, minor division */
-  --a-subsection-family: var(--a-font-family-heading);
-  --a-subsection-weight: var(--a-weight-semibold);
-  --a-subsection-sm: 15px;
-  --a-subsection-md: 16px;
-  --a-subsection-lg: 17px;
-  --a-subsection-size: var(--a-subsection-md);
-  --a-subsection-leading: var(--a-font-leading-normal);
-  --a-subsection-tracking: var(--a-font-tracking-normal);
-  --a-subsection-case: normal;
-  --a-subsection-color: var(--a-fg-strong);
-  --a-subsection-mbs: 1.5em;
-  --a-subsection-mbe: 0.5em;
-
-  /* ──────────────────────────────────────
-     IDENTIFY — name a thing in place
-     ────────────────────────────────────── */
-
-  /* metric — KPI numerals, dashboard stats, large data values */
-  --a-metric-family: var(--a-font-family-display);
-  --a-metric-weight: var(--a-weight-thin);
-  --a-metric-sm: clamp(24px, 22px + 1vw, 34px);
-  --a-metric-md: clamp(32px, 28px + 1.5vw, 48px);
-  --a-metric-lg: clamp(44px, 38px + 2vw, 64px);
-  --a-metric-size: var(--a-metric-md);
-  --a-metric-leading: var(--a-font-leading-tight);
-  --a-metric-tracking: var(--a-font-tracking-tight);
-  --a-metric-case: normal;
-  --a-metric-color: var(--a-fg-strong);
-  --a-metric-mbs: 0;
-  --a-metric-mbe: 0;
-  --a-metric-figures: lining;
-  --a-metric-spacing: tabular;
-
-  /* ──────────────────────────────────────
-     ACT — invite interaction
-     ────────────────────────────────────── */
-
-  /* UI / action — button text, link text, control labels, CTA microcopy
-     Sizes defined in tokens.css as --a-ui-size-* */
-  --a-ui-family: var(--a-font-family-ui);
-  --a-ui-weight: var(--a-weight-medium);
-  --a-ui-tiny: 10px;
-  --a-ui-2xs: 11px;
-  --a-ui-xs: 12px;
-  --a-ui-sm: 13px;
-  --a-ui-md: 14px;
-  --a-ui-lg: 15px;
-  --a-ui-size: var(--a-ui-md);
-  --a-ui-leading: 1;
-  --a-ui-line-height: var(--a-body-leading);  /* §230-bundle (v0.5.9): alias for prose-style line-height inside UI body copy (e.g. alert message text). 1.5 by default. Closes the alert.css orphaned reference. */
-  --a-ui-tracking: var(--a-font-tracking-normal);
-  --a-ui-case: normal;
-  --a-ui-color: inherit;
-  --a-ui-px: var(--a-space-2);
-  --a-ui-py: var(--a-space-2);
-  --a-ui-mbs: 0;
-  --a-ui-mbe: 0;
-
-  /* ──────────────────────────────────────
-     TEXT — running content
-     ────────────────────────────────────── */
-
-  /* body — default running text */
-  --a-body-family: var(--a-font-family-text);
-  --a-body-weight: var(--a-weight-normal);
-  --a-body-sm: 14px;
-  --a-body-md: 15px;
-  --a-body-lg: 16px;
-  --a-body-size: var(--a-body-md);
-  --a-body-leading: var(--a-font-leading-loose);
-  --a-body-tracking: var(--a-font-tracking-normal);
-  --a-body-case: normal;
-  --a-body-color: var(--a-fg);
-  --a-body-mbs: 0;
-  --a-body-mbe: 1em;
-  --a-body-max-width: 65ch;
-
-  /* code — inline and block code */
-  --a-code-family: var(--a-font-family-code);
-  --a-code-weight: var(--a-weight-normal);
-  --a-code-sm: 13px;
-  --a-code-md: 14px;
-  --a-code-lg: 15px;
-  --a-code-size: var(--a-code-md);
-  --a-code-leading: var(--a-font-leading-relaxed);
-  --a-code-tracking: var(--a-font-tracking-normal);
-  --a-code-case: normal;
-  --a-code-color: var(--a-fg);
-  --a-code-mbs: 0;
-  --a-code-mbe: 0;
-
-  /* ═══════════════════════════════════════════════════════════
-     MODE OVERRIDES — REGISTER (voice) control.
-
-     [prose] is ORTHOGONAL to [size]:
-       • [prose] shifts the sm/md/lg VALUES (bigger at every tier)
-         and changes the DEFAULT tier pick to -md for all roles.
-       • [size] on containers shifts which tier is active.
-
-     Neither [prose] nor [size] should be set globally on <body>.
-     Both scope to containers — a page can have a compact sidebar
-     + expressive hero + standard body.
-     ═══════════════════════════════════════════════════════════ */
-}
-
-
-/* ═══════════════════════════════════════════════════════════
-   VARIANT ATTRIBUTE — applies typography roles to any element.
-
-   h1-h6 provide semantic meaning, variant provides visual style.
-   Works on any element, not just text-ui.
-
-     <h1 variant="display">Hero</h1>
-     <h4 variant="heading">Section</h4>
-     <p>Metadata</p>
-     <span variant="kicker">Category</span>
-   ═══════════════════════════════════════════════════════════ */
-
-/* ── h1–h6 defaults — sensible roles, zero specificity so [variant] wins ── */
-:where(h1) {
-  font-family: var(--a-title-family);
-  font-weight: var(--a-title-weight);
-  font-size: var(--a-title-size);
-  line-height: var(--a-title-leading);
-  letter-spacing: var(--a-title-tracking);
-  color: var(--a-title-color);
-}
-:where(h2) {
-  font-family: var(--a-heading-family);
-  font-weight: var(--a-heading-weight);
-  font-size: var(--a-heading-size);
-  line-height: var(--a-heading-leading);
-  letter-spacing: var(--a-heading-tracking);
-  color: var(--a-heading-color);
-}
-:where(h3) {
-  font-family: var(--a-section-family);
-  font-weight: var(--a-section-weight);
-  font-size: var(--a-section-size);
-  line-height: var(--a-section-leading);
-  letter-spacing: var(--a-section-tracking);
-  color: var(--a-section-color);
-}
-:where(h4) {
-  font-family: var(--a-subsection-family);
-  font-weight: var(--a-subsection-weight);
-  font-size: var(--a-subsection-size);
-  line-height: var(--a-subsection-leading);
-  letter-spacing: var(--a-subsection-tracking);
-  color: var(--a-subsection-color);
-}
-:where(h5) {
-  font-family: var(--a-caption-family);
-  font-weight: var(--a-caption-weight);
-  font-size: var(--a-caption-size);
-  line-height: var(--a-caption-leading);
-  letter-spacing: var(--a-caption-tracking);
-  color: var(--a-caption-color);
-}
-:where(h6) {
-  font-family: var(--a-label-family);
-  font-weight: var(--a-label-weight);
-  font-size: var(--a-label-size);
-  line-height: var(--a-label-leading);
-  letter-spacing: var(--a-label-tracking);
-  color: var(--a-label-color);
-}
-
-/* ═══════════════════════════════════════════════════════════
-   NATIVE ELEMENT DEFAULTS — semantic HTML baseline.
-   Low specificity via :where() so component @scope always wins.
-
-   Block:  table, lists, blockquote, hr, pre, dl, details
-   Inline: strong/b, em/i, small, mark, del, ins, code, a
-   Size:   smaller, larger/large (custom inline elements)
-   Media:  img
-   ═══════════════════════════════════════════════════════════ */
-
-/* ── Tables ── */
-:where(table) {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--a-body-size);
-  line-height: var(--a-body-leading);
-}
-
-:where(th) {
-  text-align: left;
-  font-size: var(--a-ui-sm);
-  font-weight: var(--a-weight-medium);
-  color: var(--a-fg-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: var(--a-space-2) var(--a-space-3);
-  border-bottom: 1px solid var(--a-border);
-}
-
-:where(td) {
-  padding: var(--a-space-2) var(--a-space-3);
-  border-bottom: 1px solid var(--a-border-subtle);
-  vertical-align: top;
-}
-
-:where(tr:hover td) {
-  background: var(--a-bg-muted);
-}
-
-/* ── Lists ── */
-:where(ul, ol) {
-  padding-inline-start: 1.5em;
-  margin-block: 0.5em;
-  font-size: var(--a-body-size);
-  line-height: var(--a-body-leading);
-  color: var(--a-fg);
-}
-
-:where(li) {
-  margin-block: 0.25em;
-}
-
-:where(li::marker) {
-  color: var(--a-fg-muted);
-}
-
-/* ── Blockquote ── */
-:where(blockquote) {
-  margin: 1em 0;
-  padding: var(--a-space-3) var(--a-space-4);
-  border-inline-start: 3px solid var(--a-border);
-  color: var(--a-fg-subtle);
-  font-style: italic;
-}
-
-:where(blockquote p) {
-  margin: 0;
-}
-
-/* ── Horizontal rule ── */
-:where(hr) {
-  border: none;
-  border-top: 1px solid var(--a-border-subtle);
-  margin-block: var(--a-space-4);
-}
-
-/* ── Code (inline + block) ── */
-:where(code) {
-  font-family: var(--a-code-family);
-  font-size: 0.9em;
-  background: var(--a-bg-muted);
-  padding: 0.125em 0.375em;
-  border-radius: var(--a-radius-sm);
-  color: var(--a-fg);
-}
-
-:where(pre) {
-  font-family: var(--a-code-family);
-  font-size: var(--a-code-size);
-  line-height: var(--a-code-leading);
-  background: var(--a-bg-muted);
-  padding: var(--a-space-4);
-  border-radius: var(--a-radius-md);
-  overflow-x: auto;
-  margin-block: var(--a-space-3);
-}
-
-:where(pre code) {
-  background: none;
-  padding: 0;
-  border-radius: 0;
-  font-size: inherit;
-}
-
-/* ── Definition lists ── */
-:where(dt) {
-  font-weight: var(--a-weight-semibold);
-  margin-block-start: 0.75em;
-}
-
-:where(dd) {
-  margin-inline-start: 1.5em;
-  color: var(--a-fg-subtle);
-}
-
-/* ── Details/Summary ── */
-:where(summary) {
-  cursor: pointer;
-  font-weight: var(--a-weight-medium);
-}
-
-:where(details[open] summary) {
-  margin-block-end: 0.5em;
-}
-
-/* ── Strong / Bold ──
-   Semibold (600), not bold (700) — bold is the heading weight.
-   Color bumps to --a-fg-strong for contrast against body text. */
-:where(strong, b) {
-  font-weight: var(--a-weight-semibold);
-  color: var(--a-fg-strong);
-}
-
-/* ── Emphasis ── */
-:where(em, i) {
-  font-style: italic;
-}
-
-/* ── Small — de-emphasis in size and color ── */
-:where(small) {
-  font-size: 0.875em;
-  color: var(--a-fg-subtle);
-}
-
-/* ── Mark — system highlight tokens ── */
-:where(mark) {
-  background: var(--a-highlight);
-  color: var(--a-highlight-text);
-  padding-inline: 0.125em;
-  border-radius: 0.125em;
-}
-
-/* ── Deleted / Inserted — editorial change tracking ── */
-:where(del) {
-  text-decoration: line-through;
-  color: var(--a-fg-muted);
-}
-
-:where(ins) {
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-underline-offset: 0.15em;
-}
-
-/* ── Links ── */
-:where(a) {
-  color: var(--a-link);
-  text-decoration: none;
-}
-
-:where(a:hover) {
-  color: var(--a-link-hover);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-:where(a:visited) {
-  color: var(--a-link-visited);
-}
-
-/* ── Size wrappers — custom inline elements for relative sizing ── */
-:where(smaller) {
-  font-size: 0.875em;
-}
-
-:where(larger, large) {
-  font-size: 1.125em;
-}
-
-/* ── Images ── */
-:where(img) {
-  max-width: 100%;
-  height: auto;
-  border-radius: var(--a-radius-md);
-}
-
-[variant="display"] {
-  font-family: var(--a-display-family);
-  font-weight: var(--a-display-weight);
-  font-size: var(--a-display-size);
-  line-height: var(--a-display-leading);
-  letter-spacing: var(--a-display-tracking);
-  text-transform: var(--a-display-case);
-  color: var(--a-display-color);
-}
-[variant="title"] {
-  font-family: var(--a-title-family);
-  font-weight: var(--a-title-weight);
-  font-size: var(--a-title-size);
-  line-height: var(--a-title-leading);
-  letter-spacing: var(--a-title-tracking);
-  text-transform: var(--a-title-case);
-  color: var(--a-title-color);
-}
-[variant="heading"] {
-  font-family: var(--a-heading-family);
-  font-weight: var(--a-heading-weight);
-  font-size: var(--a-heading-size);
-  line-height: var(--a-heading-leading);
-  letter-spacing: var(--a-heading-tracking);
-  text-transform: var(--a-heading-case);
-  color: var(--a-heading-color);
-}
-[variant="section"] {
-  font-family: var(--a-section-family);
-  font-weight: var(--a-section-weight);
-  font-size: var(--a-section-size);
-  line-height: var(--a-section-leading);
-  letter-spacing: var(--a-section-tracking);
-  text-transform: var(--a-section-case);
-  color: var(--a-section-color);
-}
-[variant="subsection"] {
-  font-family: var(--a-subsection-family);
-  font-weight: var(--a-subsection-weight);
-  font-size: var(--a-subsection-size);
-  line-height: var(--a-subsection-leading);
-  letter-spacing: var(--a-subsection-tracking);
-  text-transform: var(--a-subsection-case);
-  color: var(--a-subsection-color);
-}
-[variant="body"] {
-  font-family: var(--a-body-family);
-  font-weight: var(--a-body-weight);
-  font-size: var(--a-body-size);
-  line-height: var(--a-body-leading);
-  letter-spacing: var(--a-body-tracking);
-  text-transform: var(--a-body-case);
-  color: var(--a-fg);
-}
-[variant="caption"] {
-  font-family: var(--a-caption-family);
-  font-weight: var(--a-caption-weight);
-  font-size: var(--a-caption-size);
-  line-height: var(--a-caption-leading);
-  letter-spacing: var(--a-caption-tracking);
-  text-transform: var(--a-caption-case);
-  color: var(--a-caption-color);
-}
-[variant="label"] {
-  font-family: var(--a-label-family);
-  font-weight: var(--a-label-weight);
-  font-size: var(--a-label-size);
-  line-height: var(--a-label-leading);
-  letter-spacing: var(--a-label-tracking);
-  text-transform: var(--a-label-case);
-  color: var(--a-label-color);
-}
-[variant="kicker"] {
-  font-family: var(--a-kicker-family);
-  font-weight: var(--a-kicker-weight);
-  font-size: var(--a-kicker-size);
-  line-height: var(--a-kicker-leading);
-  letter-spacing: var(--a-kicker-tracking);
-  text-transform: uppercase;
-  color: var(--a-kicker-color);
-}
-[variant="deck"] {
-  font-family: var(--a-deck-family);
-  font-weight: var(--a-deck-weight);
-  font-size: var(--a-deck-size);
-  line-height: var(--a-deck-leading);
-  letter-spacing: var(--a-deck-tracking);
-  text-transform: var(--a-deck-case);
-  color: var(--a-deck-color);
-}
-[variant="metric"] {
-  font-family: var(--a-metric-family);
-  font-weight: var(--a-metric-weight);
-  font-size: var(--a-metric-size);
-  line-height: var(--a-metric-leading);
-  letter-spacing: var(--a-metric-tracking);
-  text-transform: var(--a-metric-case);
-  color: var(--a-metric-color);
-}
-[variant="code"] {
-  font-family: var(--a-code-family);
-  font-weight: var(--a-code-weight);
-  font-size: var(--a-code-size);
-  line-height: var(--a-code-leading);
-  letter-spacing: var(--a-code-tracking);
-  text-transform: var(--a-code-case);
-  color: var(--a-code-color);
-}
-
-/* ═══════════════════════════════════════════════════════════
-   GLOBAL PRESENTATIONAL ATTRIBUTES
-   Work on any element. Attribute-driven, not class-based.
-
-   NOTE: These have lower specificity than @scope component CSS.
-   Using [weight="bold"] on a component like <text-ui> will be
-   overridden by the component's own font-weight rule. Use these
-   on plain elements (<span>, <p>, <div>) or choose the right
-   [variant] instead.
-   ═══════════════════════════════════════════════════════════ */
-
-/* Text alignment */
-[text-align="left"] {
-  text-align: left;
-}
-[text-align="center"] {
-  text-align: center;
-}
-[text-align="right"] {
-  text-align: right;
-}
-
-/* Font weight — six steps matching --a-weight-* tokens */
-[weight="thin"] {
-  --a-weight: var(--a-weight-thin);
-  font-weight: var(--a-weight);
-} /* 100 — hairline, display only */
-[weight="light"] {
-  --a-weight: var(--a-weight-light);
-  font-weight: var(--a-weight);
-} /* 300 — light UI emphasis */
-[weight="normal"] {
-  --a-weight: var(--a-weight-normal);
-  font-weight: var(--a-weight);
-} /* 400 */
-[weight="medium"] {
-  --a-weight: var(--a-weight-medium);
-  font-weight: var(--a-weight);
-} /* 500 */
-[weight="semibold"] {
-  --a-weight: var(--a-weight-semibold);
-  font-weight: var(--a-weight);
-} /* 600 */
-[weight="bold"] {
-  --a-weight: var(--a-weight-bold);
-  font-weight: var(--a-weight);
-} /* 700 */
-
-/* Text color */
-[color] {
-  color: var(--a-fg);
-}
-[color="text"] {
-  --a-fg: var(--a-canvas-text);
-}
-[color="text-strong"] {
-  --a-fg: var(--a-fg-strong);
-}
-[color="subtle"] {
-  --a-fg: var(--a-fg-subtle);
-}
-[color="muted"] {
-  --a-fg: var(--a-fg-muted);
-}
-[color="accent"] {
-  --a-fg: var(--a-accent);
-}
-[color="success"] {
-  --a-fg: var(--a-success);
-}
-[color="warning"] {
-  --a-fg: var(--a-warning);
-}
-[color="danger"] {
-  --a-fg: var(--a-danger);
-}
-[color="info"] {
-  --a-fg: var(--a-info);
-}
-
-/* Text transform */
-[transform="uppercase"] {
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-[transform="lowercase"] {
-  text-transform: lowercase;
-}
-[transform="capitalize"] {
-  text-transform: capitalize;
-}
-[transform="none"] {
-  text-transform: none;
-}
-
-/* Truncation */
-[truncate] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Visibility */
-[hidden] {
-  display: none !important;
-}
-
-[nomargin] {
-  margin: 0;
-}
-
-/* Flex grow — fills remaining space in a flex parent.
-   Works on any element (col-ui, row-ui, input-ui, etc.) */
-[grow] {
-  flex: 1;
-  min-width: 0;
-}
+/* adia:barrel/typography — COMPAT BARREL (public entry; standalone-linked).
+   The type system is now split by layer under type/{scale,roles,elements}.css,
+   and the presentational attribute API that had drifted in here moved to
+   api/{text,layout}.css (v0.6.48 foundation reorg, ADR-0035). The imports
+   below reproduce the historical cascade order exactly. */
+
+@import "./type/scale.css";    /* L1/L2 — families, weights, leading, tracking */
+@import "./type/roles.css";    /* L3   — 13 roles + h1-h6 + [variant] */
+@import "./type/elements.css"; /* native element defaults */
+@import "./api/text.css";      /* [text-align][weight][color][transform][truncate] */
+@import "./api/layout.css";    /* [hidden][nomargin][grow] */