/*
  Axvoid Learn — typography tokens (AxvoidLearn theme; design basis of 2026-10-30)

  Theme file of AxvoidLearn 2.0.0. Source of truth for this part of the design system.
  Components read only the --lrn-* tokens below; no component hard-codes a family, size or weight.

  Fixed by the founder (Learn AGENTS.md, D534): English text uses the same family as axvoid.com,
  Montserrat Alternates. The live theme self-hosts it as "Axvoid Montserrat" in weights 400, 600, 700
  only; there is no italic and no other weight, so the scale below uses only those three.

  Switches on <html> (all optional, per-visitor, stored in the browser by the preview page):
    data-code="mono | ui | system"    which family code blocks use (default: mono)
    data-size="default | large | xlarge"   reading size for body text and code (default: default)

  The @font-face declarations stay in the theme (or in the preview page); this file only names roles.
*/

:root {
  /* ---------- families (roles) ---------- */
  --lrn-font-ui:      "Axvoid Montserrat", "Montserrat Alternates", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --lrn-font-display: var(--lrn-font-ui);
  --lrn-font-body:    var(--lrn-font-ui);
  --lrn-font-ar:      "Beiruti", "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif;  /* reserved, Arabic not scheduled */

  /* code options; --lrn-font-code points at one of them */
  --lrn-font-code-mono:   "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lrn-font-code-ui:     var(--lrn-font-ui);
  --lrn-font-code-system: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lrn-font-code:        var(--lrn-font-code-mono);

  /* ---------- weights actually available ---------- */
  --lrn-w-regular:  400;
  --lrn-w-semibold: 600;
  --lrn-w-bold:     700;

  /* ---------- reading scale: 1 by default; data-size raises body and code only ---------- */
  --lrn-scale: 1;

  /* ---------- sizes ---------- */
  --lrn-fs-label:   12px;                              /* eyebrows, chips, table headers */
  --lrn-fs-small:   13.5px;                            /* meta lines, captions, notes */
  --lrn-fs-ui:      15px;                              /* buttons, navigation, form text */
  --lrn-fs-body:    calc(17px * var(--lrn-scale));     /* lesson reading */
  --lrn-fs-code:    calc(14.5px * var(--lrn-scale));   /* code blocks and inline code */
  --lrn-fs-lead:    20px;                              /* lesson summary under the title */
  --lrn-fs-h3:      22px;
  --lrn-fs-h2:      clamp(26px, 3.1vw, 42px);          /* same as the live homepage */
  --lrn-fs-h1:      clamp(30px, 4.4vw, 52px);          /* lesson and course titles */
  --lrn-fs-display: clamp(48px, 7.8vw, 112px);         /* homepage hero only; live theme uses clamp(64px,7.8vw,112px) */

  /* ---------- line height ---------- */
  --lrn-lh-display: .98;
  --lrn-lh-heading: 1.2;
  --lrn-lh-ui:      1.4;
  --lrn-lh-body:    1.7;
  --lrn-lh-code:    1.65;

  /* ---------- tracking ---------- */
  --lrn-ls-display: -.065em;   /* as the live hero */
  --lrn-ls-h2:      -.055em;   /* as the live section headings */
  --lrn-ls-h1:      -.035em;
  --lrn-ls-h3:      -.02em;
  --lrn-ls-label:   .14em;     /* with uppercase */

  /* ---------- reading measure and code behaviour ---------- */
  --lrn-measure: 64ch;
  --lrn-code-ligatures: none;  /* learners must see the exact characters; no != turning into a symbol */
}

html[data-code="ui"]     { --lrn-font-code: var(--lrn-font-code-ui); }
html[data-code="system"] { --lrn-font-code: var(--lrn-font-code-system); }
html[data-code="mono"]   { --lrn-font-code: var(--lrn-font-code-mono); }

html[data-size="large"]  { --lrn-scale: 1.12; }
html[data-size="xlarge"] { --lrn-scale: 1.25; }

/* ---------- role classes (reference implementation; the theme may map its own selectors to these) ---------- */
.lrn-display { font: var(--lrn-w-bold) var(--lrn-fs-display)/var(--lrn-lh-display) var(--lrn-font-display); letter-spacing: var(--lrn-ls-display); }
.lrn-h1      { font: var(--lrn-w-bold) var(--lrn-fs-h1)/var(--lrn-lh-heading) var(--lrn-font-display);  letter-spacing: var(--lrn-ls-h1); }
.lrn-h2      { font: var(--lrn-w-bold) var(--lrn-fs-h2)/1.25 var(--lrn-font-display);                   letter-spacing: var(--lrn-ls-h2); }
.lrn-h3      { font: var(--lrn-w-semibold) var(--lrn-fs-h3)/1.3 var(--lrn-font-display);                letter-spacing: var(--lrn-ls-h3); }
.lrn-lead    { font: var(--lrn-w-regular) var(--lrn-fs-lead)/1.55 var(--lrn-font-body); }
.lrn-body    { font: var(--lrn-w-regular) var(--lrn-fs-body)/var(--lrn-lh-body) var(--lrn-font-body); max-width: var(--lrn-measure); }
.lrn-ui      { font: var(--lrn-w-semibold) var(--lrn-fs-ui)/var(--lrn-lh-ui) var(--lrn-font-ui); }
.lrn-small   { font: var(--lrn-w-regular) var(--lrn-fs-small)/1.5 var(--lrn-font-body); }
.lrn-label   { font: var(--lrn-w-bold) var(--lrn-fs-label)/1.3 var(--lrn-font-ui); letter-spacing: var(--lrn-ls-label); text-transform: uppercase; }
.lrn-code    { font: var(--lrn-w-regular) var(--lrn-fs-code)/var(--lrn-lh-code) var(--lrn-font-code); font-variant-ligatures: var(--lrn-code-ligatures); font-feature-settings: "calt" 0, "liga" 0; tab-size: 2; }
.lrn-num     { font-variant-numeric: tabular-nums lining-nums; }   /* test records, costs, timings */
.lrn-ar      { font-family: var(--lrn-font-ar); }