/* ============================================================
   Befimmo — Typography
   One typeface: Satoshi. The brand voice mixes Light and Bold
   in the same headline, with heavy use of uppercase eyebrows.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: "Satoshi", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: var(--font-sans);

  /* ---- Weights ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* ---- Display scale (editorial headlines) ---- */
  --type-display-xl: 900 5rem/0.98 var(--font-display);   /* 80px — hero */
  --type-display-l: 700 3.5rem/1.02 var(--font-display);  /* 56px */
  --type-display-m: 700 2.5rem/1.05 var(--font-display);  /* 40px */
  --type-display-s: 700 1.75rem/1.1 var(--font-display);  /* 28px */

  /* ---- Heading scale (UI) ---- */
  --type-h1: 700 2rem/1.15 var(--font-sans);     /* 32px */
  --type-h2: 700 1.5rem/1.2 var(--font-sans);    /* 24px */
  --type-h3: 500 1.25rem/1.25 var(--font-sans);  /* 20px */

  /* ---- Body ---- */
  --type-body-l: 400 1.125rem/1.55 var(--font-sans); /* 18px */
  --type-body-m: 400 1rem/1.55 var(--font-sans);     /* 16px */
  --type-body-s: 400 0.875rem/1.5 var(--font-sans);  /* 14px */

  /* ---- Eyebrow / label (uppercase, tracked) ---- */
  --type-eyebrow: 500 0.8125rem/1.2 var(--font-sans); /* 13px */
  --type-caption: 400 0.75rem/1.4 var(--font-sans);   /* 12px */

  /* ---- Letter-spacing ---- */
  --tracking-display: -0.02em;  /* tight on big display */
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-eyebrow: 0.14em;   /* wide on uppercase labels */
  --tracking-wide: 0.04em;
}