/* adia:role/type — The 13 typographic roles (L3) + their application.
   Role tokens (--a-<role>-*), the h1-h6 :where() defaults, and the
   [variant="<role>"] attribute that applies a role to any element.
   Moved verbatim out of typography.css (v0.6.48 foundation reorg,
   ADR-0035). NOTE: [variant] rules are grouped here (ahead of
   type/elements.css) — safe because [variant] is (0,1,0) and native
   element defaults are :where() (0,0,0); specificity decides, not order. */

/* Role tokens → `tokens` layer — completes the tokens layer the @layer migration
   deferred (ADR-0038). Behavior-neutral: each token is declared once, so layer
   assignment can't change resolution. */
@layer tokens {
:root {
  /* ═══════════════════════════════════════════════════════════
     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.
     ═══════════════════════════════════════════════════════════ */
}
} /* @layer tokens — role tokens */

/* ═══════════════════════════════════════════════════════════
   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>
   ═══════════════════════════════════════════════════════════ */

/* The h1–h6 :where() defaults moved to styles/type/elements.css (the
   element-defaults file, which already owns the bare h1–h6 text-wrap/leading
   rule) during the @layer migration — ADR-0038 step 4. They belong in the
   `elements` layer alongside the rest of the native-element baseline. Role
   *tokens* (above) stay here (unlayered → `tokens`); the [variant] API (below)
   is now the `utilities` layer (step 6). */

/* [variant] attribute API → `utilities` layer (ADR-0038 step 6). Above
   `components` and `elements`, so a [variant] on any element (component,
   heading, span) wins by layer order — not specificity. Within `utilities` it
   ties with [weight]/[color] (all (0,1,0)); source order decides, and api/text
   imports AFTER this block, so [weight] still wins that tie — preserved by both
   landing in the same layer. */
@layer utilities {
[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);
}
} /* @layer utilities — [variant] API */
