/* ============================================================
   ChETL UI Typography Bindings
   ============================================================
   Binds design tokens to component selectors.
   Also owns behavioral variables (--reading-scale).
   Must load AFTER typography.css.
   ============================================================ */

/* ── Reading scale (behavioral) ───────────────────────────── */
.theory-normal { --reading-scale: 1.0; }
.theory-large  { --reading-scale: 1.15; }

/* ── Font families on specific elements ───────────────────── */
.symbols-table .symbol-col { font-family: "Times New Roman", Times, serif; font-style: italic; }
.variable-table { font-family: var(--font-mono); }

.blackboard-container .bb-equation { font-family: var(--font-mono); }

/* ── Config panel ─────────────────────────────────────────── */
.config-label          { font-size: var(--font-label); }
.config-section-title  { font-size: var(--font-caption); }

.config-panel .q-field__native,
.config-panel .q-field__input { font-size: var(--font-body) !important; }

/* ── Appearance controls ──────────────────────────────────── */
.appearance-label  { font-size: var(--font-micro); }
.appearance-option { font-size: var(--font-caption); }

/* ── Blackboard ───────────────────────────────────────────── */
.blackboard-container .bb-section-title { font-size: var(--font-heading); }
.blackboard-container .bb-content       { font-size: var(--font-table); }
.blackboard-container .bb-equation      { font-size: var(--font-heading); }

/* ── Theory content ───────────────────────────────────────── */
.theory-content { font-size: var(--font-body); }

/* MathJax: relative to surrounding text (not tokenized) */
.MathJax { font-size: 1.1em !important; }

/* ── Tables ───────────────────────────────────────────────── */
.symbols-table,
.symbols-table td  { font-size: var(--font-table); }

.symbols-table .units-col { font-size: var(--font-caption); }

.theory-table,
.theory-table td   { font-size: var(--font-table); }

/* ── Learning outcomes ────────────────────────────────────── */
.learning-outcome,
.learning-outcome-intro,
.outcome-number    { font-size: var(--font-caption); }

/* ── Tab hierarchy ────────────────────────────────────────── */
.q-tabs.chetl-tabs.module-tabs    .q-tab__label { font-size: var(--font-body)    !important; }
.q-tabs.chetl-tabs.property-tabs  .q-tab__label { font-size: var(--font-label)   !important; }
.q-tabs.chetl-tabs.workspace-tabs .q-tab__label { font-size: var(--font-caption) !important; }

/* ── Theory scaling (--reading-scale) ─────────────────────── */
.theory-content,
.theory-content p,
.theory-content div {
    font-size: calc(var(--font-body) * var(--reading-scale)) !important;
}
.learning-outcome,
.learning-outcome-intro,
.outcome-number,
.contents-title {
    font-size: calc(var(--font-caption) * var(--reading-scale)) !important;
}
.info-table,
.info-table td {
    font-size: calc(var(--font-caption) * var(--reading-scale)) !important;
}
.symbols-table,
.symbols-table td,
.theory-table,
.theory-table td {
    font-size: calc(var(--font-table) * var(--reading-scale)) !important;
}

/* MathJax: exempt from scaling — remains relative to parent */
.theory-normal .MathJax,
.theory-large  .MathJax { font-size: inherit !important; }