/* Yudicon — typography tokens
 * Source: Brand Book "Typografie" pages.
 *
 * Brand fonts (self-hosted — see tokens/fonts.css + assets/fonts/):
 *   ABC Favorit Light            — headlines & body
 *   ABC Favorit Extended Light   — claim & subheadlines, +2% tracking
 *   ABC Favorit Expanded Medium  — wordmark setting, +30% tracking
 *   Saol Light Italic            — serif emphasis
 */
:root {
  /* ── Families ─────────────────────────────────────────── */
  --font-sans: "ABC Favorit", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-sans-extended: "ABC Favorit Extended", "ABC Favorit", -apple-system, sans-serif;
  --font-sans-expanded: "ABC Favorit Expanded", "ABC Favorit Extended", sans-serif;
  --font-serif-italic: "Saol Display", Georgia, serif;

  /* ── Weights ──────────────────────────────────────────── */
  --weight-light: 300;     /* the default everywhere */
  --weight-regular: 400;
  --weight-medium: 500;    /* wordmark only */

  /* ── Width axis (only affects variable-font fallbacks) ── */
  --width-std: 100;
  --width-extended: 125;

  /* ── Tracking ─────────────────────────────────────────── */
  --tracking-extended: 0.02em;   /* claim & subheadlines (Zeichenabstand 2%) */
  --tracking-wordmark: 0.30em;   /* YUDICON wordmark setting */
  --tracking-button: 0.10em;     /* pill buttons / small caps labels */

  /* ── Line heights (from brand book annotations) ───────── */
  --leading-claim: 1.1;          /* claim, vertical claim */
  --leading-display: 1.05;       /* very large display setting */
  --leading-headline: 1.2;       /* Favorit Std Light headlines */
  --leading-body: 1.3;           /* body text 130–135% */
  --leading-serif: 1.1;          /* Saol Light Italic 110% */
  --leading-subhead: 1.3;        /* Favorit Extended Light 130% */

  /* ── Scale (digital reference, 1920 canvas) ───────────── */
  --text-xs: 12px;     /* footer rows */
  --text-sm: 14px;     /* pill buttons */
  --text-base: 18px;   /* annotations */
  --text-md: 24px;     /* page labels, list numbers */
  --text-lg: 28px;     /* body on slides */
  --text-xl: 34px;     /* mission body */
  --text-2xl: 44px;    /* index rows / numbered blocks */
  --text-3xl: 60px;    /* mobile hero display */
  --text-4xl: 85px;    /* claim / display */
  --text-5xl: 108px;   /* statement display */
}

/* ── Base setting ───────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-variation-settings: "wdth" var(--width-std);
  color: var(--text-body);
  background: var(--surface-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Recurring text styles ──────────────────────────────── */
/* Display / headlines: Favorit Std Light */
.yud-display {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  line-height: var(--leading-headline);
  letter-spacing: 0;
}

/* Claim & subheadlines: Favorit Extended Light, 2% tracking */
.yud-extended {
  font-family: var(--font-sans-extended);
  font-variation-settings: "wdth" var(--width-extended);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-extended);
  line-height: var(--leading-subhead);
}

/* Subheadlines are set in caps */
.yud-subhead {
  font-family: var(--font-sans-extended);
  font-variation-settings: "wdth" var(--width-extended);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-extended);
  line-height: var(--leading-subhead);
  text-transform: uppercase;
}

/* Emphasis: Saol Light Italic — used INSIDE Favorit headlines/body */
.yud-serif, .yud-em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: var(--weight-light);
  line-height: var(--leading-serif);
  letter-spacing: 0;
}

/* Wordmark setting: Favorit Expanded Medium, 30% tracking */
.yud-wordmark-text {
  font-family: var(--font-sans-expanded);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  line-height: 1;
}

/* Body copy */
.yud-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
}