/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — Universität Freiburg
   House typeface: "Social" (humanist-modern grotesque).
   Substituted here with Archivo (variable, width axis) — see fonts.css.
   Two cuts in use:
     • Breit / Extended  → "kraftvolle Überschriften" (display headlines)
     • Normal            → body, sublines, UI
   Office fallback per CD: Arial.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Families */
  --font-social: 'Archivo', 'Social', 'Helvetica Neue', Arial, sans-serif;
  --font-office: Arial, 'Helvetica Neue', sans-serif;       /* everyday docs */

  /* Width axis (font-stretch maps to Archivo's wdth) */
  --width-normal:   100%;
  --width-extended: 125%;   /* "Breit" — display headlines */

  /* Weights (Social cuts: Book = 400, Medium = 500) */
  --weight-book:    400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ===== Type scale (1.250 major-third-ish, tuned) ===== */
  --text-display-1:  5rem;     /* 80px — hero (scale down responsively in use) */
  --text-display-2:  3.5rem;   /* 56px */
  --text-h1:         2.5rem;    /* 40px */
  --text-h2:         2rem;      /* 32px */
  --text-h3:         1.5rem;    /* 24px */
  --text-h4:         1.25rem;   /* 20px */
  --text-lead:       1.25rem;   /* 20px subline */
  --text-body:       1.0625rem; /* 17px */
  --text-body-sm:    0.9375rem; /* 15px */
  --text-caption:    0.8125rem; /* 13px */
  --text-overline:   0.75rem;   /* 12px label */

  /* Line heights */
  --leading-tight:   1.05;   /* display headlines */
  --leading-snug:    1.18;   /* headings */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;   /* overlines / labels */
  --tracking-wider:   0.08em;
}

/* ===== Semantic text roles — apply as classes if useful ===== */
.ufr-display {
  font-family: var(--font-social);
  font-stretch: var(--width-extended);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.ufr-h1 {
  font-family: var(--font-social);
  font-stretch: var(--width-extended);
  font-weight: var(--weight-medium);
  font-size: var(--text-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.ufr-h2 {
  font-family: var(--font-social);
  font-stretch: var(--width-extended);
  font-weight: var(--weight-medium);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
}
.ufr-h3 {
  font-family: var(--font-social);
  font-stretch: var(--width-normal);
  font-weight: var(--weight-medium);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
}
.ufr-lead {
  font-family: var(--font-social);
  font-stretch: var(--width-normal);
  font-weight: var(--weight-book);
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.ufr-body {
  font-family: var(--font-social);
  font-stretch: var(--width-normal);
  font-weight: var(--weight-book);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}
.ufr-overline {
  font-family: var(--font-social);
  font-stretch: var(--width-normal);
  font-weight: var(--weight-medium);
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}