/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY.CSS  —  GLOBAL TYPE BASELINE
   ───────────────────────────────────────────────────────────────────────
   The single enforced baseline for text size + family across the platform.
   Every page inherits BODY = 14px (--ds-font-size-base, the Finance Lab
   workhorse) and the Sora / JetBrains Mono families. Bare semantic elements
   (h1–h6, p, table, form controls, code…) get a consistent ladder from the
   token scale in tokens.css.

   SPECIFICITY CONTRACT
   • Only bare-element selectors here → specificity (0,0,1). Any component
     rule with a class (0,1,0)+ overrides this. So this is the FLOOR, never a
     hammer. Do not add classes or !important here.
   • Load order (index.html): AFTER framework/bootstrap.min.css so these win
     over Bootstrap's element-level h1–h6 / body rules; BEFORE component CSS
     (which is class-based and wins regardless of order).
   • html/:root font-size is intentionally left at the 16px browser default —
     the rem values in the scale assume a 16px root. Never set it here.
   ═══════════════════════════════════════════════════════════════════════ */

body {
    font-family: var(--ds-font-sans);
    font-size: var(--ds-font-size-base);          /* 14px */
    line-height: var(--ds-line-height-normal);    /* 1.5  */
}

/* ─── Headings — one hierarchy everywhere ──────────────────────────────── */
h1, .h1 { font-size: var(--ds-font-size-3xl); line-height: var(--ds-line-height-tight); }  /* 30 */
h2, .h2 { font-size: var(--ds-font-size-2xl); line-height: var(--ds-line-height-tight); }  /* 24 */
h3, .h3 { font-size: var(--ds-font-size-xl);  line-height: var(--ds-line-height-tight); }  /* 20 */
h4, .h4 { font-size: var(--ds-font-size-lg);  line-height: var(--ds-line-height-tight); }  /* 18 */
h5, .h5 { font-size: var(--ds-font-size-md);  line-height: var(--ds-line-height-tight); }  /* 16 */
h6, .h6 { font-size: var(--ds-font-size-base); line-height: var(--ds-line-height-tight); } /* 14 */

/* ─── Body copy ────────────────────────────────────────────────────────── */
p, ul, ol, li, dl, dd, dt, blockquote, figure {
    font-size: var(--ds-font-size-base);          /* 14 */
}

small, .small, figcaption, caption {
    font-size: var(--ds-font-size-xs);            /* 12 */
}

/* ─── Tables ───────────────────────────────────────────────────────────── */
table, th, td { font-size: var(--ds-font-size-base); }   /* 14 */

/* ─── Form controls — inherit family, sit at body size ─────────────────── */
input, select, textarea, button, optgroup {
    font-family: inherit;
    font-size: var(--ds-font-size-base);          /* 14 */
}

/* ─── Monospace — numbers, code, tabular data ──────────────────────────── */
code, kbd, samp, pre, tt {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-font-size-sm);            /* 13 */
}