/* ═══════════════════════════════════════════════════════════════
   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. 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;
}
