/**
 * pfc-rhythm.css — Type-rhythm and spacing baseline for working surfaces.
 *
 * Wave-15 §B: the design tokens in pfc-tokens.css already define the right
 * spacing (4/8/12/16/24/32/48/64/96) and type scale (11→96px). What was
 * missing was a baseline LAYER that applies the rhythm by default — pages
 * are full of inline font-size and margin overrides because the baseline
 * wasn't there to fall back on.
 *
 * Selectors use :where(...) so specificity is 0,0,0. Any inline style
 * still wins; we never fight the page. We only fill in where the page
 * doesn't speak. This is the Monarch / Copilot discipline applied as a
 * progressive enhancement, not a sweeping refactor.
 *
 * Scope: only on body[data-pfc-surface="working"] — marketing surfaces
 * have their own opinionated layouts and we don't override them.
 */

/* ── HEADING RHYTHM ────────────────────────────────────────────────
   Per Monarch / Copilot: display serif for headings, monospace for
   numbers, sans for body. Tight letter-spacing on display sizes. */
:where([data-pfc-surface="working"]) :where(h1) {
  font-family: var(--font-display);
  font-size: var(--t-30);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text, var(--ink));
}
:where([data-pfc-surface="working"]) :where(h2) {
  font-family: var(--font-display);
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text, var(--ink));
}
:where([data-pfc-surface="working"]) :where(h3) {
  font-family: var(--font-display);
  font-size: var(--t-18);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text, var(--ink));
}
:where([data-pfc-surface="working"]) :where(h4, h5, h6) {
  font-family: var(--font-body);
  font-size: var(--t-14);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text, var(--ink));
}

/* ── BODY RHYTHM ────────────────────────────────────────────────────
   Generous line-height for prose. Tabular numerals everywhere by
   default — even outside .num — so numbers in cards align. */
:where([data-pfc-surface="working"]) :where(p) {
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* ── NUMERIC RHYTHM ─────────────────────────────────────────────────
   .num already gets mono + tabular nums from pfc-reskin.css. Add the
   right type weight and feature settings here so a finance dashboard
   has the proper Monarch-style numeric character: thin, tight, aligned. */
:where([data-pfc-surface="working"]) :where(.num) {
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
  letter-spacing: -0.005em;
}

/* ── CARD RHYTHM ────────────────────────────────────────────────────
   Cards default to the 24px (--space-5) padding and 16px gap between
   cards. Inline padding still wins. Avoids 5 different card visual
   weights on one page. */
:where([data-pfc-surface="working"]) :where(.card, .pfc-card, .metric) {
  padding: var(--space-5);
}
:where([data-pfc-surface="working"]) :where(.metrics) {
  gap: var(--space-4);
}

/* ── SECTION RHYTHM ─────────────────────────────────────────────────
   Stack rule: any consecutive section/card gets a baseline margin so
   we never see flush-stacked blocks. */
:where([data-pfc-surface="working"]) :where(section + section) {
  margin-top: var(--space-6);
}

/* ── TABLE NUMERIC ALIGNMENT ────────────────────────────────────────
   Per Monarch: numbers in tables right-align with tabular nums. */
:where([data-pfc-surface="working"]) :where(td, th) :where(.num) {
  text-align: right;
}