/* Typography — Albo Deuren
   Brand font: Titillium (shipped as Titillium Web). The brand book uses
   Thin / Light / Regular / Semibold / Bold — never Black. Body text min 8.5pt;
   avoid Thin/Light at small sizes (they wash out). */
:root {
  /* Families */
  --font-base: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  /* PC fallback for Office (Word/Excel/PowerPoint/e-mail) per brand book */
  --font-office-fallback: "Segoe UI", Arial, sans-serif;

  /* Weights (Black 900 intentionally omitted) */
  --weight-thin: 200;     /* display only, large sizes */
  --weight-light: 300;    /* large text only */
  --weight-regular: 400;
  --weight-semibold: 600; /* default heading weight */
  --weight-bold: 700;

  /* Type scale (1.250 major-third, rem) */
  --text-2xs: 0.75rem;   /* 12px — UI min */
  --text-xs: 0.8125rem;  /* 13px */
  --text-sm: 0.9375rem;  /* 15px */
  --text-base: 1.0625rem;/* 17px — body default */
  --text-md: 1.1875rem;  /* 19px */
  --text-lg: 1.375rem;   /* 22px */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 2.875rem;  /* 46px */
  --text-4xl: 3.75rem;   /* 60px */
  --text-5xl: 4.75rem;   /* 76px */

  /* Line heights */
  --leading-tight: 1.08;   /* display */
  --leading-snug: 1.2;     /* headings */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.65; /* long-form */

  /* Letter spacing — Titillium is slightly wide; tighten display, open labels */
  --tracking-display: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;   /* uppercase eyebrows / labels */
  --tracking-wide: 0.16em;

  /* ---- Semantic roles ---- */
  --font-display: var(--weight-light);
  --font-heading-weight: var(--weight-semibold);
  --font-body-weight: var(--weight-regular);
  --font-eyebrow-weight: var(--weight-semibold);
}

/* Optional ready-made text classes (use the vars directly when you prefer) */
.albo-display { font-family: var(--font-heading); font-weight: var(--weight-light); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text-strong); }
.albo-h1 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-display); color: var(--text-strong); }
.albo-h2 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--text-strong); }
.albo-h3 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--text-strong); }
.albo-body { font-family: var(--font-base); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); }
.albo-lead { font-family: var(--font-base); font-weight: var(--weight-light); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); }
.albo-eyebrow { font-family: var(--font-base); font-weight: var(--weight-semibold); font-size: var(--text-xs); line-height: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--albo-blauw); }
.albo-caption { font-family: var(--font-base); font-weight: var(--weight-regular); font-size: var(--text-2xs); line-height: var(--leading-normal); color: var(--text-muted); }