/* public/css/typography.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Phoenix v2 — typography utility classes
 *
 * These classes compose the type system defined in tokens.css.
 * Apply them to HTML elements in views and components.
 * Load after tokens.css, before styles.css.
 *
 * Usage
 * ─────
 * <h1 class="h-display">Annual Revenue</h1>
 * <p class="body-text">Sales across all channels...</p>
 * <span class="eyebrow">This quarter</span>
 * <label class="label-sans">ISBN</label>
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ── Headings ────────────────────────────────────────────────────────────── */

/* Hero / page-level display heading — Bentham, large */
.h-display {
    font-family: var(--font-title);
    font-size: var(--text-2xl);
    font-weight: 400;               /* Bentham has a single weight; 400 is it */
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

/* Section / card heading — Bentham, mid-size */
.h-section {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: var(--leading-snug);
    letter-spacing: 0;
    color: var(--ink);
}

/* Sub-section heading — Bentham, small */
.h-sub {
    font-family: var(--font-title);
    font-size: var(--text-md);
    font-weight: 400;
    line-height: var(--leading-snug);
    color: var(--ink);
}


/* ── Body text ───────────────────────────────────────────────────────────── */

/* Long-form prose — EB Garamond, comfortable reading size */
.body-text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--ink);
}

/* Smaller body — for captions, descriptions, secondary info */
.body-small {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--ink-dim);
}

/* Italic body — for blurbs, notes, quotes */
.body-italic {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-style: italic;
    line-height: var(--leading-normal);
    color: var(--ink);
}


/* ── Labels & UI text ────────────────────────────────────────────────────── */

/* Eyebrow — small all-caps label appearing above a heading */
.eyebrow {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--ink-dim);
    line-height: var(--leading-tight);
}

/* Label sans — form labels, table headers, badge text */
.label-sans {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--ink);
    line-height: var(--leading-tight);
}

/* Micro label — the very smallest UI text */
.label-micro {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-dim);
}


/* ── Figures & numbers ───────────────────────────────────────────────────── */

/* Large stat/KPI number — Bentham, tabular */
.figure-lg {
    font-family: var(--font-title);
    font-size: var(--text-2xl);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Medium figure — for table totals, sub-stats */
.figure-md {
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Inline monetary amount */
.amount {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}


/* ── Colour modifiers ────────────────────────────────────────────────────── */

.text-ink     { color: var(--ink); }
.text-muted   { color: var(--ink-dim); }
.text-gold    { color: var(--gold); }
.text-teal    { color: var(--teal); }
.text-coral   { color: var(--coral); }
.text-moss    { color: var(--moss); }

/* Legacy names — keep these; existing views use them */
.text-success { color: var(--moss); }
.text-danger  { color: var(--coral); }
.text-warning { color: #c48a00; }    /* darkened gold for legibility on white */


/* ── Drop cap ────────────────────────────────────────────────────────────── */

/* Apply to a <p> that opens a section — first letter drops two lines */
.drop-cap::first-letter {
    font-family: var(--font-title);
    font-size: 3.2em;
    font-weight: 400;
    float: left;
    line-height: 0.75;
    margin-right: 0.1em;
    margin-top: 0.1em;
    color: var(--ink);
}


/* ── Marginalia ──────────────────────────────────────────────────────────── */

/* Small annotation text, typically in a right-rail column */
.marginalia {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--ink-dim);
    line-height: var(--leading-loose);
    border-left: 2px solid var(--rule);
    padding-left: var(--space-4);
}


/* ── Prose rhythm helpers ────────────────────────────────────────────────── */

/* Apply to a container for comfortable long-form reading */
.prose {
    max-width: 68ch;
}

.prose p + p {
    margin-top: 1em;
}

/* Rule / divider */
.rule {
    border: none;
    border-top: 1px solid var(--rule);
    margin: var(--space-6) 0;
}