/**
 * Typography utilities — koppel tokens aan elementen.
 * Gebruik in component-CSS: font-size: var(--chodo-text-editorial-size); etc.
 * Of voeg .chodo-type-* toe in markup (styleguide / geleidelijke migratie).
 */

/* —— Display (Epicene Bold) —— */

.chodo-type-display-hero {
  font-family: var(--chodo-font-epicene-bold);
  font-size: var(--chodo-text-display-hero-size);
  font-weight: 700;
  line-height: var(--chodo-leading-display-hero);
  letter-spacing: var(--chodo-tracking-display-tight);
}

.chodo-type-display-title {
  font-family: var(--chodo-font-epicene-bold);
  font-size: var(--chodo-text-display-title-size);
  font-weight: 700;
  line-height: var(--chodo-leading-display-title);
  letter-spacing: var(--chodo-tracking-display-title);
}

.chodo-type-display-section {
  font-family: var(--chodo-font-epicene-regular);
  font-size: var(--chodo-text-display-section-size);
  font-weight: 400;
  line-height: var(--chodo-leading-display-section);
  letter-spacing: var(--chodo-tracking-display-tight);
}

.chodo-type-display-card {
  font-family: var(--chodo-font-epicene-bold);
  font-size: var(--chodo-text-display-card-size);
  font-weight: 700;
  line-height: var(--chodo-leading-display-card);
  letter-spacing: var(--chodo-tracking-display);
}

.chodo-type-display-item {
  font-family: var(--chodo-font-epicene-bold);
  font-size: var(--chodo-text-display-item-size);
  font-weight: 700;
  line-height: var(--chodo-leading-display-item);
  letter-spacing: var(--chodo-tracking-display);
}

.chodo-type-display-sub {
  font-family: var(--chodo-font-epicene-regular);
  font-size: var(--chodo-text-display-sub-size);
  font-weight: 400;
  line-height: var(--chodo-leading-display-sub);
  letter-spacing: var(--chodo-tracking-display);
}

/* —— Editorial (Epicene Regular) —— */

.chodo-type-editorial {
  font-family: var(--chodo-font-epicene-regular);
  font-size: var(--chodo-text-editorial-size);
  font-weight: 400;
  line-height: var(--chodo-leading-editorial);
  letter-spacing: var(--chodo-tracking-editorial);
}

.chodo-type-editorial-home {
  font-family: var(--chodo-font-epicene-regular);
  font-size: var(--chodo-text-editorial-size);
  font-weight: 400;
  line-height: var(--chodo-leading-editorial-home);
  letter-spacing: var(--chodo-tracking-editorial);
}

.chodo-type-editorial-sm {
  font-family: var(--chodo-font-epicene-regular);
  font-size: var(--chodo-text-editorial-sm-size);
  font-weight: 400;
  line-height: var(--chodo-leading-editorial-sm);
  letter-spacing: var(--chodo-tracking-editorial);
}

/* —— UI (Neue Haas) —— */

.chodo-type-ui-lg {
  font-family: var(--chodo-font-sans);
  font-size: var(--chodo-text-ui-lg-size);
  font-weight: 700;
  line-height: var(--chodo-leading-ui-lg);
  letter-spacing: var(--chodo-tracking-ui-lg);
}

.chodo-type-ui-md-bold {
  font-family: var(--chodo-font-sans);
  font-size: var(--chodo-text-ui-md-size);
  font-weight: 700;
  line-height: var(--chodo-leading-ui-md);
  letter-spacing: var(--chodo-tracking-none);
}

.chodo-type-ui-reading {
  font-family: var(--chodo-font-sans);
  font-size: var(--chodo-text-ui-reading-size);
  font-weight: 400;
  line-height: var(--chodo-leading-ui-reading);
  letter-spacing: var(--chodo-tracking-ui);
}

.chodo-type-ui-sm {
  font-family: var(--chodo-font-sans);
  font-size: var(--chodo-text-ui-sm-size);
  font-weight: 400;
  line-height: var(--chodo-leading-ui-sm);
  letter-spacing: var(--chodo-tracking-none);
}

.chodo-type-ui-sm-bold {
  font-family: var(--chodo-font-sans);
  font-size: var(--chodo-text-ui-sm-size);
  font-weight: 700;
  line-height: var(--chodo-leading-ui-sm);
  letter-spacing: var(--chodo-tracking-none);
}

.chodo-type-ui-xs {
  font-family: var(--chodo-font-sans);
  font-size: var(--chodo-text-ui-xs-size);
  font-weight: 400;
  line-height: var(--chodo-leading-ui-xs);
  letter-spacing: var(--chodo-tracking-ui);
}

.chodo-type-ui-2xs {
  font-family: var(--chodo-font-sans);
  font-size: var(--chodo-text-ui-2xs-size);
  font-weight: 400;
  line-height: var(--chodo-leading-ui-2xs);
  letter-spacing: var(--chodo-tracking-ui-wide);
}