/* ==========================================================================
   Utsho — typography.css
   Three font roles, never four. Source: Platform Blueprint v5, Section 2.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Font families (3 roles only) ---- */
  --font-display: 'Fraunces', Georgia, serif;      /* headings only — never body text */
  --font-body:    'Inter', Arial, sans-serif;       /* all paragraph/UI text */
  --font-mono:    'Courier New', monospace;         /* metadata labels only — "LESSON 2 OF 5", tags, sidebar group labels */

  /* ---- Sizes ---- */
  --text-h1: 2.3rem;
  --text-h2: 1.5rem;
  --text-h3: 1.15rem;
  --text-body: 1rem;
  --text-small: 0.9rem;
  --text-meta: 0.78rem;   /* mono labels, uppercase tags */

  /* ---- Weights ---- */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  /* ---- Line height ---- */
  --leading-body: 1.65;
  --leading-tight: 1.3;

  /* ---- Letter spacing ---- */
  --tracking-mono-label: 0.05em; /* used on mono metadata + sidebar group labels, v6 §3 */
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--text);
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--text);
  margin: 0;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

/* Emphasis word inside a heading — v6 Section 2. Use sparingly: one word
   per heading, never a whole phrase. */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--primary);
}

.meta-label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
}

.sidebar-group-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}