/*
 * Elevate UI/UX Typography Standard — UI02
 * Functional baseline: R37
 * Builds on UI01 tokens without modifying application/business logic.
 *
 * SAFETY CONTRACT
 * - Typography only: font family, size variables, line-height hierarchy.
 * - No display/position/grid/flex/width/height/overflow/z-index changes.
 * - Existing R37 app_typography.css remains present and unchanged.
 * - Existing module-specific typography remains authoritative where it is
 *   deliberately more specific; those modules are migrated later one-by-one.
 */

:root {
  /* Re-map the existing R37 typography contract onto the UI01 token scale. */
  --eot-font-ui: var(--elevate-font-sans);
  --eot-page-title: var(--elevate-font-size-2xl);      /* 22px */
  --eot-section-title: var(--elevate-font-size-xl);    /* 18px */
  --eot-subsection-title: var(--elevate-font-size-lg); /* 16px */
  --eot-data: 0.9375rem;                               /* 15px */
  --eot-body: var(--elevate-font-size-md);             /* 14px */
  --eot-label: var(--elevate-font-size-sm);            /* 13px */
  --eot-helper: var(--elevate-font-size-xs);           /* 12px */
  --eot-badge: 0.6875rem;                              /* 11px */
  --eot-lh-tight: var(--elevate-line-height-tight);
  --eot-lh-normal: var(--elevate-line-height-normal);
  --eot-lh-reading: var(--elevate-line-height-relaxed);
}

/*
 * Wealth User Manual and the reserved Wealth placeholder are the two R37
 * templates that intentionally do not load app_typography.css. Scope their
 * type only, so adding the shared hierarchy cannot leak into other screens.
 */
body.wealth-manual-page,
body.wealth-placeholder-page {
  font-family: var(--elevate-font-sans);
  font-size: var(--eot-body);
  line-height: var(--eot-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wealth-manual-page .brand h1,
.wealth-placeholder-page .brand h1 {
  font-size: var(--eot-page-title);
  line-height: var(--eot-lh-tight);
}

.wealth-manual-page .intro,
.wealth-manual-page .card p,
.wealth-manual-page .card li,
.wealth-placeholder-page .placeholder p {
  font-size: var(--eot-body);
  line-height: var(--eot-lh-reading);
}

.wealth-manual-page .card h2,
.wealth-placeholder-page .placeholder h2 {
  font-size: var(--eot-section-title);
  line-height: var(--eot-lh-tight);
}

.wealth-manual-page .card h3 {
  font-size: var(--eot-subsection-title);
  line-height: var(--eot-lh-tight);
}

.wealth-manual-page .toc a,
.wealth-manual-page .table th,
.wealth-manual-page .table td,
.wealth-manual-page .note {
  font-size: var(--eot-label);
}

.wealth-manual-page .muted,
.wealth-manual-page .flow span,
.wealth-manual-page .status,
.wealth-placeholder-page .tag {
  font-size: var(--eot-helper);
}

.wealth-manual-page strong,
.wealth-manual-page b,
.wealth-manual-page .table,
.wealth-placeholder-page strong,
.wealth-placeholder-page b {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  :root {
    /* Preserve R37's comfortable mobile body/control sizing while giving
       headings a consistent hierarchy. */
    --eot-page-title: 1.25rem;       /* 20px */
    --eot-section-title: 1.0625rem;  /* 17px */
    --eot-subsection-title: 0.9375rem; /* 15px */
    --eot-data: 0.9375rem;           /* 15px */
    --eot-body: var(--elevate-font-size-md);  /* 14px */
    --eot-label: var(--elevate-font-size-sm); /* 13px */
    --eot-helper: var(--elevate-font-size-sm);/* 13px */
    --eot-badge: var(--elevate-font-size-xs); /* 12px */
  }
}