/* Clarify · Type scale (Figma typography system)
 *
 * Source: /typography/Typography-system in de Clarify library.
 * 6 breakpoints (xS → xxL) × 9 stijlen.
 *
 * Convention: Heading-stijlen zijn Nib Pro Regular,
 * body/intro/quote/highlights zijn Satoshi.
 * Waarden zijn font-size / line-height in px.
 *
 * Use met de utility classes:
 *   <h1 class="type-h1">…</h1>
 *   <p class="type-body">…</p>
 *   <p class="type-intro">…</p>
 *
 * Of via tokens:
 *   font-size: var(--type-h1-size);
 *   line-height: var(--type-h1-leading);
 *
 * Active values schalen automatisch met viewport (mobile→4K).
 */

/* ─── 1. Default = xS (mobile) ───────────────────────────────── */
:root {
  --type-tiny-size:        12px;  --type-tiny-leading:        16px;
  --type-small-size:       14px;  --type-small-leading:       16px;
  --type-body-size:        16px;  --type-body-leading:        24px;
  --type-large-size:       18px;  --type-large-leading:       24px;
  --type-intro-size:       19px;  --type-intro-leading:       24px;
  --type-highlights-size:  21px;  --type-highlights-leading:  24px;
  --type-quote-size:       25px;  --type-quote-leading:       32px;

  --type-h6-size:          18px;  --type-h6-leading:          24px;
  --type-h5-size:          21px;  --type-h5-leading:          24px;
  --type-h4-size:          25px;  --type-h4-leading:          32px;
  --type-h3-size:          29px;  --type-h3-leading:          32px;
  --type-h2-size:          34px;  --type-h2-leading:          40px;
  --type-h1-size:          40px;  --type-h1-leading:          48px;
}

/* ─── 2. S (≥768) ────────────────────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --type-tiny-size:        13px;  --type-tiny-leading:        16px;
    --type-small-size:       14px;  --type-small-leading:       16px;
    --type-body-size:        16px;  --type-body-leading:        24px;
    --type-large-size:       19px;  --type-large-leading:       24px;
    --type-intro-size:       22px;  --type-intro-leading:       24px;
    --type-highlights-size:  25px;  --type-highlights-leading:  32px;
    --type-quote-size:       30px;  --type-quote-leading:       32px;

    --type-h6-size:          19px;  --type-h6-leading:          24px;
    --type-h5-size:          25px;  --type-h5-leading:          32px;
    --type-h4-size:          30px;  --type-h4-leading:          32px;
    --type-h3-size:          36px;  --type-h3-leading:          48px;
    --type-h2-size:          42px;  --type-h2-leading:          48px;
    --type-h1-size:          48px;  --type-h1-leading:          56px;
  }
}

/* ─── 3. M (≥1024) ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --type-body-size:        17px;  --type-body-leading:        24px;
    --type-large-size:       19px;  --type-large-leading:       24px;
    --type-intro-size:       22px;  --type-intro-leading:       24px;
    --type-highlights-size:  27px;  --type-highlights-leading:  32px;
    --type-quote-size:       34px;  --type-quote-leading:       40px;

    --type-h6-size:          20px;  --type-h6-leading:          24px;
    --type-h5-size:          27px;  --type-h5-leading:          32px;
    --type-h4-size:          34px;  --type-h4-leading:          40px;
    --type-h3-size:          42px;  --type-h3-leading:          48px;
    --type-h2-size:          50px;  --type-h2-leading:          56px;
    --type-h1-size:          56px;  --type-h1-leading:          64px;
  }
}

/* ─── 4. L (≥1440) ───────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --type-body-size:        18px;  --type-body-leading:        24px;
    --type-large-size:       20px;  --type-large-leading:       24px;
    --type-intro-size:       24px;  --type-intro-leading:       32px;
    --type-highlights-size:  31px;  --type-highlights-leading:  40px;
    --type-quote-size:       40px;  --type-quote-leading:       48px;

    --type-h6-size:          22px;  --type-h6-leading:          24px;
    --type-h5-size:          31px;  --type-h5-leading:          40px;
    --type-h4-size:          40px;  --type-h4-leading:          48px;
    --type-h3-size:          50px;  --type-h3-leading:          56px;
    --type-h2-size:          65px;  --type-h2-leading:          72px;
    --type-h1-size:          83px;  --type-h1-leading:          96px;
  }
}

/* ─── 5. xL (≥1920) ──────────────────────────────────────────── */
@media (min-width: 1920px) {
  :root {
    --type-body-size:        20px;  --type-body-leading:        32px;
    --type-large-size:       22px;  --type-large-leading:       24px;
    --type-intro-size:       27px;  --type-intro-leading:       32px;
    --type-highlights-size:  36px;  --type-highlights-leading:  48px;
    --type-quote-size:       48px;  --type-quote-leading:       56px;

    --type-h6-size:          22px;  --type-h6-leading:          24px;
    --type-h5-size:          36px;  --type-h5-leading:          48px;
    --type-h4-size:          48px;  --type-h4-leading:          56px;
    --type-h3-size:          64px;  --type-h3-leading:          72px;
    --type-h2-size:          84px;  --type-h2-leading:          96px;
    --type-h1-size:          112px; --type-h1-leading:          128px;
  }
}

/* ─── Utility classes ────────────────────────────────────────── */
.type-tiny       { font-family: var(--font-sans); font-size: var(--type-tiny-size);       line-height: var(--type-tiny-leading); }
.type-small      { font-family: var(--font-sans); font-size: var(--type-small-size);      line-height: var(--type-small-leading); }
.type-body       { font-family: var(--font-sans); font-size: var(--type-body-size);       line-height: var(--type-body-leading); }
.type-large      { font-family: var(--font-sans); font-size: var(--type-large-size);      line-height: var(--type-large-leading); }
.type-intro      { font-family: var(--font-sans); font-size: var(--type-intro-size);      line-height: var(--type-intro-leading); font-weight: 500; }
.type-highlights { font-family: var(--font-sans); font-size: var(--type-highlights-size); line-height: var(--type-highlights-leading); font-weight: 500; }
.type-quote      { font-family: var(--font-sans); font-size: var(--type-quote-size);      line-height: var(--type-quote-leading); font-weight: 500; }

.type-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h1-size); line-height: var(--type-h1-leading); letter-spacing: -0.01em; }
.type-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h2-size); line-height: var(--type-h2-leading); letter-spacing: -0.01em; }
.type-h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h3-size); line-height: var(--type-h3-leading); }
.type-h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h4-size); line-height: var(--type-h4-leading); }
.type-h5 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h5-size); line-height: var(--type-h5-leading); }
.type-h6 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h6-size); line-height: var(--type-h6-leading); }

/* Eyebrow (uppercase mini-label) — niet uit Figma maar een zinnige aanvulling */
.type-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.2;
}