/* ============================================================
   TYPOGRAPHY — Sébastien Reuille
   Two typefaces: Tiempos Headline (serif) for headings, and
   Helsingin Text Web (sans) for body & UI. Headings 600 (the
   heaviest Tiempos cut), body 400/500, labels/eyebrows 600.
   Editorial serif display over a clean humanist-sans base.
   Type scale ships mobile-first; the desktop step-up applies
   at >=992px (the brand's lg breakpoint).
   ============================================================ */

:root {
  --font-heading: "Tiempos Headline", Georgia, "Times New Roman", serif;
  --font-body: "Helsingin Text Web", system-ui, -apple-system, sans-serif;
  /* --font-sans is the UI/body alias used throughout the components */
  --font-sans: var(--font-body);
  --font-serif: var(--font-heading);

  --font-weight-light: 400;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 700;
  /* Heaviest available heading cut (Tiempos Semibold) */
  --font-weight-heading: 600;

  /* Heading scale (mobile) */
  --text-h1: 3rem;      /* 48px */
  --text-h2: 2.75rem;   /* 44px */
  --text-h3: 2rem;      /* 32px */
  --text-h4: 1.5rem;    /* 24px */
  --text-h5: 1.25rem;   /* 20px */
  --text-h6: 1.125rem;  /* 18px */

  --leading-heading: 1.2;
  --leading-h1: 1.1;
  --tracking-heading: -0.01em;

  /* Body scale (mobile) */
  --text-large: 1.125rem;   /* 18px */
  --text-medium: 1rem;      /* 16px */
  --text-regular: 0.875rem; /* 14px */
  --text-small: 0.75rem;    /* 12px */
  --text-tiny: 0.625rem;    /* 10px */
  --leading-body: 1.6;
}

/* Desktop step-up — matches the brand's lg breakpoint (992px) */
@media (min-width: 992px) {
  :root {
    --text-h1: 5.25rem;    /* 84px */
    --text-h2: 3.75rem;    /* 60px */
    --text-h3: 3rem;       /* 48px */
    --text-h4: 2.5rem;     /* 40px */
    --text-h5: 2rem;       /* 32px */
    --text-h6: 1.625rem;   /* 26px */

    --text-large: 1.625rem;   /* 26px */
    --text-medium: 1.25rem;   /* 20px */
    --text-regular: 1.125rem; /* 18px */
    --text-small: 1rem;       /* 16px */
    --text-tiny: 0.75rem;     /* 12px */
  }
}