/**
 * Chodowiecki 300 — design tokens (typography)
 *
 * Desktop = clamp-max (huidige voorkeursmaten).
 * Mobiel = clamp-min (iets compacter dan de huidige mobiele breakpoints).
 *
 * Line-heights zijn unitless (= percentage van font-size).
 * Gebruik var(--chodo-text-*) in component-CSS of .chodo-type-* utilities.
 */

:root {
  /* —— Font families —— */
  --chodo-font-epicene-regular: "Epicene Regular", "epicene-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --chodo-font-epicene-bold: "Epicene Bold", "epicene-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --chodo-font-sans: "neue-haas-grotesk-text", "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* —— Letter-spacing —— */
  --chodo-tracking-display-tight: -0.02em;
  --chodo-tracking-display: -0.01em;
  --chodo-tracking-editorial: -0.005em;
  --chodo-tracking-ui: 0.02em;
  --chodo-tracking-ui-wide: 0.03em;
  --chodo-tracking-none: 0;

  /* —— Display: Epicene Bold —— */

  /* Hero (home-hero-headline) — was 90px / mob ~48px → min 44px */
  --chodo-text-display-hero-size: clamp(2.75rem, 2.75rem + 5vw, 5.625rem);
  --chodo-leading-display-hero: 0.95;

  /* Overlay-menu + programm-detail h1 — desktop 75px */
  --chodo-text-display-title-size: clamp(2.75rem, 2.5rem + 3.5vw, 4.6875rem);
  --chodo-leading-display-title: 1.05;
  --chodo-tracking-display-title: -0.01em;

  /* Sectie-intro, legal h1, kalender-maand — was 42px / mob 28px → min 26px */
  --chodo-text-display-section-size: clamp(1.625rem, 1.625rem + 1.5vw, 2.625rem);
  --chodo-leading-display-section: 1.1;

  /* Programm-kaart titel (lijst) — was 48px / ≤1200: 34px → min 30px */
  --chodo-text-display-card-size: clamp(1.875rem, 1.875rem + 2vw, 3rem);
  --chodo-leading-display-card: 1.05;

  /* Grid-kaart, kalender-event, Orte-naam, legal h1, related cards — 32px → min 26px */
  --chodo-text-display-item-size: clamp(1.625rem, 1.625rem + 1.2vw, 2rem);
  --chodo-leading-display-item: 1.05;

  /* Programm-detail intro — 28px → min 22px */
  --chodo-text-display-sub-size: clamp(1.375rem, 1.375rem + 0.8vw, 1.75rem);
  --chodo-leading-display-sub: 1.15;

  /* —— Editorial: Epicene Regular —— */

  /* Body copy — detail, Künstler, Projekt (middenkolom) */
  --chodo-text-editorial-size: clamp(1.125rem, 1.125rem + 0.5vw, 1.375rem);
  --chodo-leading-editorial: 1.35;

  /* Zelfde maat als editorial, compactere leading op homepage */
  --chodo-leading-editorial-home: 1.2;

  /* Kaart-copy — min 16px, leading 1.2 */
  --chodo-text-editorial-sm-size: clamp(1rem, 1rem + 0.35vw, 1.25rem);
  --chodo-leading-editorial-sm: 1.2;

  /* —— UI: Neue Haas Grotesk —— */

  /* Kicker, footer-nav — was 20px → min 17px */
  --chodo-text-ui-lg-size: clamp(1.0625rem, 1.0625rem + 0.4vw, 1.25rem);
  --chodo-leading-ui-lg: 1.15;
  --chodo-tracking-ui-lg: 0;

  /* Card-meta — was 16px → min 14px, altijd bold */
  --chodo-text-ui-md-size: clamp(0.875rem, 0.875rem + 0.35vw, 1rem);
  --chodo-leading-ui-md: 1.25;

  /* Legal body, langere sans-tekst — desktop 16px → min 14px */
  --chodo-text-ui-reading-size: clamp(0.875rem, 0.875rem + 0.35vw, 1rem);
  --chodo-leading-ui-reading: 1.35;

  /* Knoppen, filters, kalender-l2 — was 15px → min 13px */
  --chodo-text-ui-sm-size: clamp(0.8125rem, 0.8125rem + 0.3vw, 0.9375rem);
  --chodo-leading-ui-sm: 1.25;

  /* Footer body, partnerlijsten — was 13px → min 12px */
  --chodo-text-ui-xs-size: clamp(0.75rem, 0.75rem + 0.2vw, 0.8125rem);
  --chodo-leading-ui-xs: 1.3;
  --chodo-leading-ui-xs-caption: 1.3;

  /* Legal links, copyright, compacte labels — was 12px → min 11px */
  --chodo-text-ui-2xs-size: clamp(0.6875rem, 0.6875rem + 0.15vw, 0.75rem);
  --chodo-leading-ui-2xs: 1.3;

  /* —— Layout —— */
  --chodo-page-gutter: 20px;
  --chodo-bleed-width: calc(100vw - (var(--chodo-page-gutter) * 2));
  --chodo-bleed-margin-left: calc(50% - 50vw + var(--chodo-page-gutter));
  --chodo-bleed-breakout-width: calc(100% + (var(--chodo-page-gutter) * 2));
  --chodo-bleed-breakout-margin: calc(-1 * var(--chodo-page-gutter));
}

/* Tablet: strakkere editorial leading + iets grotere display-item (641–1024) */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --chodo-leading-editorial: 1.25;
    --chodo-leading-editorial-home: 1.15;
    --chodo-text-display-item-size: clamp(1.75rem, 1.75rem + 1.4vw, 2.25rem);
  }
}

@media (max-width: 640px) {
  :root {
    --chodo-page-gutter: 10px;
    --chodo-text-ui-lg-size: clamp(1rem, 1rem + 0.4vw, 1.25rem);
    --chodo-text-ui-md-size: clamp(0.8125rem, 0.8125rem + 0.35vw, 1rem);
    --chodo-text-editorial-sm-size: clamp(1rem, 1rem + 0.35vw, 1.25rem);
  }
}