/* ============================================================
   Bellevue Zuhause Plus — Typography tokens
   Senior-friendly: generous sizes, high legibility, calm rhythm.
   ============================================================ */

:root {
  /* --- Families -------------------------------------------- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;   /* logo / brand statements, ALL CAPS */
  --font-serif:   'Lora', 'Iowan Old Style', Georgia, serif; /* editorial headings, quotes */
  --font-sans:    'Mulish', 'Segoe UI', system-ui, -apple-system, sans-serif; /* UI + body */
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Weights ------------------------------- @kind font --- */
  --fw-light:     300;   /* @kind font */
  --fw-regular:   400;   /* @kind font */
  --fw-medium:    500;   /* @kind font */
  --fw-semibold:  600;   /* @kind font */
  --fw-bold:      700;   /* @kind font */
  --fw-display:   600;   /* @kind font */

  /* --- Type scale (rem; root = 16px) ----------------------- */
  --text-2xs:  0.75rem;   /* 12 — legal / micro only */
  --text-xs:   0.8125rem; /* 13 */
  --text-sm:   0.9375rem; /* 15 */
  --text-base: 1.0625rem; /* 17 — base body, larger than web default for legibility */
  --text-md:   1.1875rem; /* 19 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.625rem;  /* 26 */
  --text-2xl:  2rem;      /* 32 */
  --text-3xl:  2.5rem;    /* 40 */
  --text-4xl:  3.125rem;  /* 50 */
  --text-5xl:  3.875rem;  /* 62 */
  --text-6xl:  4.75rem;   /* 76 */

  /* --- Line heights ---------------------------------------- */
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;   /* long-form body for older readers */

  /* --- Letter spacing -------------------------------------- */
  --tracking-display: 0.08em;  /* Cinzel caps want air */
  --tracking-wide:    0.04em;
  --tracking-normal:  0em;
  --tracking-tight:  -0.01em;
  --tracking-label:   0.12em;  /* eyebrow / overline caps */

  /* ========================================================
     Semantic roles
     ======================================================== */
  --role-eyebrow-font:    var(--font-sans);
  --role-eyebrow-size:    var(--text-sm);
  --role-eyebrow-track:   var(--tracking-label);
  --role-eyebrow-weight:  var(--fw-semibold);

  --role-display-font:    var(--font-display);
  --role-heading-font:    var(--font-serif);
  --role-body-font:       var(--font-sans);

  --text-body-size:       var(--text-base);
  --text-body-leading:    var(--leading-relaxed);
}