@adia-ai/web-components 0.0.1

package/styles/typography.css

@@ -0,0 +1,853 @@
+/* ═══════════════════════════════════════════════════════════════
+   Typography System — editorial model
+
+   ROLES are JOBS, not sizes. Each role names what a piece of text
+   DOES in the document (announce, divide, orient, act, etc.).
+   A role's family, weight, leading, tracking, and case are FIXED.
+   Only its size changes with CONTEXT.
+
+   The 13 roles, by job:
+     ANNOUNCE — display, title, heading        (what is this)
+     DIVIDE   — section, subsection            (how it's divided)
+     ORIENT   — kicker, label, caption         (where are you)
+     ENTICE   — deck                           (what follows)
+     IDENTIFY — metric                         (a datum named by its value)
+     ACT      — ui                             (interactive text)
+     TEXT     — body, code                     (running content)
+
+   CONTEXT (sm/md/lg) is a VOLUME KNOB, not a size gradient.
+     sm  — background voice   (sidebar, nested card, footnote)
+     md  — normal voice       (article body, default page)
+     lg  — hero voice         (cover, marquee, hero landing)
+
+   Context travels with nesting via [size] on any ancestor — the
+   universal size token system in tokens.css shifts --a-*-size
+   tokens so every consuming component tracks the cascade.
+
+   TWO PUBLICATION REGISTERS
+     Default (productive) — Product UI.
+       Static, compressed scale. Announce/Divide roles default to -sm
+       because product UI rarely needs hero-scale type. Everything else
+       defaults to -md. 1-2 px between tiers. No fluid clamps in UI chrome.
+
+     [prose] — Long-form content (articles, docs, marketing).
+       Dynamic scale. All roles default to -md. Big dynamic range between
+       tiers. Fluid clamps on display/title/metric respond to viewport.
+       Reading measure (max-width) + generous insets.
+
+   TIERS
+     Base defaults to -sm. [size="md"] or [size="lg"] on containers shifts up.
+     [prose] overrides to -md defaults with fluid viewport-responsive clamps.
+
+   FONTS
+     --a-font-family-sans    — long-form, marketing body
+     --a-font-family-mono    — code blocks
+     --a-font-family-display — headings/metric (aliased to sans today)
+     --a-font-family-text    — body/label/caption (aliased to sans today)
+
+   VIEWPORT
+     Fluid clamps use a 375px → 1440px viewport range.
+
+   4-LAYER STACK
+     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. --a-font-weight-* are backcompat aliases (to be removed). */
+  --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: 13px;
+  --a-kicker-md: 14px;
+  --a-kicker-lg: 15px;
+  --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-sm: 13px;
+  --a-ui-md: 14px;
+  --a-ui-lg: 15px;
+  --a-ui-size: var(--a-ui-md);
+  --a-ui-leading: 1;
+  --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-default);
+  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-accent-strong);
+  text-decoration: none;
+}
+
+:where(a:hover) {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* ── 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;
+}