/* =====================================================
   ChETL Typography System
   -----------------------------------------------------
   Base scale: 1rem = 14px
   Tokens defined here are the single source of truth.
   Do not introduce new font-size values elsewhere.
   =====================================================
   This file contains ONLY:
     - The html base font-size
     - CSS custom properties (design tokens)
     - Font-family tokens
     - Utility helper classes (.font-*)
   NO component selectors.
   ===================================================== */

/* Self-hosted Inter (variable, latin subset) — no Google Fonts / external CDN.
   One woff2 covers weights 100–900. Falls back to the system stack below. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/assets/fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
}

html {
    font-size: 14px;
}

:root {
    /* ── Font family ─────────────────────────────────────── */
    --font-family-ui:   "Inter", "Segoe UI", "Roboto", system-ui, sans-serif;
    --font-mono:        "JetBrains Mono", "Fira Code", monospace;

    /* ── Spacing scale ───────────────────────────────────── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  24px;

    /* ── Size tokens ─────────────────────────────────────── */
    /* All rem tokens assume: 1rem = 14px */
    --font-display:     3rem;       /* quiz score, large numeric display */
    --font-title-xl:    1.5rem;     /* chapter title, question card text */
    --font-title:       1.25rem;    /* section headings, panel headers */
    --font-heading:     1.05rem;    /* subsection titles, blackboard labels */
    --font-body:        0.95rem;    /* theory prose, config labels */
    --font-table:       0.875rem;   /* tables, notes, secondary labels */
    --font-label:       0.85rem;    /* config section titles, property tab labels */
    --font-caption:     0.75rem;    /* eyebrow labels, badges, timestamps */
    --font-micro:       0.65rem;    /* appearance control labels */
}

/* Global font-family application */
body {
    font-family: var(--font-family-ui);
}

/* ── Utility helper classes ────────────────────────────────── */
.font-display  { font-size: var(--font-display); }
.font-title-xl { font-size: var(--font-title-xl); line-height: 2rem; }
.font-title    { font-size: var(--font-title);    line-height: 1.75rem; }
.font-heading  { font-size: var(--font-heading);  line-height: 1.5rem; }
.font-body     { font-size: var(--font-body);     line-height: 1.5rem; }
.font-table    { font-size: var(--font-table);    line-height: 1.4; }
.font-label    { font-size: var(--font-label);    line-height: 1.25rem; }
.font-caption  { font-size: var(--font-caption);  line-height: 1rem; }
.font-micro    { font-size: var(--font-micro);    line-height: 1rem; }