/**
 * Printics typografie-standaard
 * --------------------------------
 * Eén schaal voor koppen, lead, body en labels. Scope via .printics-type
 * Scope: body.printics-type op alle bezoekerspagina's (niet admin).
 *
 * Rollen:
 *   type-display  — hero / paginatitel
 *   type-h2         — sectiekop
 *   type-h3         — kaart- / featuretitel
 *   type-lead       — intro / ondertitel
 *   type-body       — standaardtekst
 *   type-body-sm    — compacte tekst, stat-labels
 *   type-caption    — footnotes, secundaire info
 *   type-eyebrow    — badge-achtige bovenregel
 *   type-label      — compacte labels (keys, tags)
 *   type-stat-number — grote cijfers
 */

.printics-type {
  --type-font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --type-display-size: clamp(2rem, 4.5vw, 3.25rem);
  --type-display-weight: 700;
  --type-display-leading: 1.12;
  --type-display-tracking: -0.025em;

  --type-h2-size: clamp(1.625rem, 2.75vw, 2rem);
  --type-h2-weight: 700;
  --type-h2-leading: 1.25;
  --type-h2-tracking: -0.02em;

  --type-h3-size: 1.125rem;
  --type-h3-weight: 600;
  --type-h3-leading: 1.35;
  --type-h3-tracking: -0.015em;

  --type-lead-size: 1.0625rem;
  --type-lead-weight: 400;
  --type-lead-leading: 1.55;

  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-leading: 1.6;

  --type-body-sm-size: 0.875rem;
  --type-body-sm-weight: 400;
  --type-body-sm-leading: 1.5;

  --type-caption-size: 0.8125rem;
  --type-caption-weight: 400;
  --type-caption-leading: 1.45;

  --type-eyebrow-size: 0.75rem;
  --type-eyebrow-weight: 600;
  --type-eyebrow-leading: 1.3;
  --type-eyebrow-tracking: 0.06em;

  --type-label-size: 0.8125rem;
  --type-label-weight: 600;
  --type-label-leading: 1.35;

  --type-stat-size: clamp(2.25rem, 5vw, 3.5rem);
  --type-stat-weight: 700;
  --type-stat-leading: 1;

  font-family: var(--type-font);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
}

/* Semantische klassen */
.printics-type .type-display {
  font-family: var(--type-font);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
  color: var(--printics-gray-900);
}

.printics-type .type-h2 {
  font-family: var(--type-font);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
  color: var(--printics-gray-900);
}

.printics-type .type-h3 {
  font-family: var(--type-font);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
  color: var(--printics-gray-900);
}

.printics-type .type-lead {
  font-family: var(--type-font);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-leading);
}

.printics-type .type-body {
  font-family: var(--type-font);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
}

.printics-type .type-body-sm {
  font-family: var(--type-font);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-leading);
}

.printics-type .type-caption {
  font-family: var(--type-font);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
}

.printics-type .type-eyebrow {
  font-family: var(--type-font);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.printics-type .type-label {
  font-family: var(--type-font);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-leading);
}

.printics-type .type-stat-number {
  font-family: var(--type-font);
  font-size: var(--type-stat-size);
  font-weight: var(--type-stat-weight);
  line-height: var(--type-stat-leading);
}

.printics-type .type-stat-label {
  font-family: var(--type-font);
  font-size: var(--type-body-sm-size);
  font-weight: 500;
  line-height: var(--type-body-sm-leading);
}

/* Bootstrap-typografie en HTML-koppen → tokens (niet op component-titels met BEM __) */
.printics-type h1:not([class*="type-"]):not([class*="__"]) {
  font-family: var(--type-font);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
}

.printics-type h2:not([class*="type-"]):not([class*="__"]) {
  font-family: var(--type-font);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
}

.printics-type h3:not([class*="type-"]):not([class*="__"]),
.printics-type h4:not([class*="type-"]):not([class*="__"]) {
  font-family: var(--type-font);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
}

.printics-type h5:not([class*="type-"]),
.printics-type h6:not([class*="type-"]),
.printics-type .h5:not([class*="type-"]),
.printics-type .h6:not([class*="type-"]) {
  font-family: var(--type-font);
  font-size: var(--type-body-sm-size);
  font-weight: 700;
  line-height: var(--type-body-sm-leading);
  letter-spacing: 0;
}

.printics-type .display-1:not(.bi),
.printics-type .display-2:not(.bi),
.printics-type .display-3:not(.bi),
.printics-type .display-4:not(.bi) {
  font-family: var(--type-font);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
}

.printics-type .display-5:not(.bi),
.printics-type .display-6:not(.bi) {
  font-family: var(--type-font);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
}

.printics-type .lead {
  font-family: var(--type-font);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-leading);
}

.printics-type .fs-3 {
  font-size: var(--type-h2-size) !important;
}

.printics-type .fs-4 {
  font-size: var(--type-h3-size) !important;
}

.printics-type .fs-5 {
  font-size: var(--type-body-sm-size) !important;
}

.printics-type .fs-6,
.printics-type small:not(.badge):not(.btn),
.printics-type .small:not(.badge):not(.btn) {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.printics-type .stat-number {
  font-family: var(--type-font);
  font-size: var(--type-stat-size);
  font-weight: var(--type-stat-weight);
  line-height: var(--type-stat-leading);
}

.printics-type .info-body-text {
  font-family: var(--type-font);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* Witte secties: erf kleur van parent (.text-white) */
.printics-type.text-white .type-h2,
.printics-type.text-white .type-lead,
.printics-type.text-white .type-display,
.printics-type .text-white .type-h2,
.printics-type .text-white .type-lead,
.printics-type .text-white .type-display {
  color: inherit;
}

/* Home: componenten koppelen aan tokens */
.home-page .home-path-keys {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-leading);
}

.home-page .home-creator-points li {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
}

.home-page .stat-number.type-stat-number {
  font-size: var(--type-stat-size);
  font-weight: var(--type-stat-weight);
  line-height: var(--type-stat-leading);
}

.home-page .home-hero-unified .type-display {
  color: #fff;
}

.home-page .home-creator-eyebrow.type-eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
}