:root {
  --ill-font-family-headline: var(--ill-font-headline, var(--ill-headline-font, var(--ill-body-font, var(--bs-body-font-family, sans-serif))));
  --ill-font-family-body: var(--ill-body-font, var(--bs-body-font-family, sans-serif));

  --ill-type-size-display: clamp(3rem, 5vw, 4.2rem);
  --ill-type-size-h1: clamp(2.8rem, 5vw, 3.75rem);
  --ill-type-size-h2: clamp(2rem, 4vw, 2.75rem);
  --ill-type-size-h3: clamp(1.5rem, 3vw, 1.75rem);
  --ill-type-size-h4: clamp(1.35rem, 2vw, 1.9rem);
  --ill-type-size-h5: 1.35rem;
  --ill-type-size-nav: clamp(1.2rem, 2vw, 1.875rem);
  --ill-type-size-lead: clamp(1.15rem, 1.4vw, 1.55rem);
  --ill-type-size-body: clamp(1rem, 1.08vw, 1.2rem);
  --ill-type-size-body-sm: 1rem;
  --ill-type-size-small: .85rem;
  --ill-type-size-button-icon: 1.35em;
  --ill-type-size-quote: clamp(1.4rem, 2vw, 2rem);
  --ill-type-size-kicker: 1.25rem;
  --ill-type-size-number: 1.25rem;

  --ill-type-lh-tight: .95;
  --ill-type-lh-headline: 1.05;
  --ill-type-lh-title: 1.1;
  --ill-type-lh-body: 1.6;
  --ill-type-lh-copy: 1.55;
  --ill-type-lh-compact: 1.25;
  --ill-type-lh-button: 1;

  --ill-type-fw-light: 300;
  --ill-type-fw-regular: 400;
  --ill-type-fw-medium: 500;
  --ill-type-fw-semibold: 600;
  --ill-type-fw-bold: 700;

  --ill-space-section-lg: clamp(3rem, 6vw, 6rem);
  --ill-space-section-md: clamp(2.5rem, 5vw, 5rem);
  --ill-space-section-sm: clamp(1.5rem, 3vw, 2rem);
  --ill-space-box: clamp(2rem, 4vw, 3rem);
  --ill-space-box-lg: clamp(2rem, 5vw, 5rem);
  --ill-space-gap-lg: clamp(2rem, 4vw, 4.5rem);
  --ill-space-gap-md: clamp(2rem, 5vw, 4rem);
  --ill-space-gap-sm: 1.5rem;
  --ill-space-stack-lg: 2rem;
  --ill-space-stack-md: 1.5rem;
  --ill-space-stack-sm: 1rem;
}

.ill-type-headline,
.ill-type-headline-lg,
.ill-type-headline-md,
.ill-type-headline-sm {
  font-family: var(--ill-font-family-headline);
  line-height: var(--ill-type-lh-headline);
  margin: 0;
}

.ill-type-headline-lg { font-size: var(--ill-type-size-h1); }
.ill-type-headline-md { font-size: var(--ill-type-size-h3); }
.ill-type-headline-sm { font-size: var(--ill-type-size-h4); }

.ill-type-body,
.ill-type-body p {
  font-family: var(--ill-font-family-body);
  font-size: var(--ill-type-size-body);
  line-height: var(--ill-type-lh-body);
}


.ill-heading {
  font-family: var(--ill-font-family-headline);
  line-height: var(--ill-type-lh-headline);
  margin: 0;
}
.ill-heading--h1 { font-size: var(--ill-type-size-h1); }
.ill-heading--h2 { font-size: var(--ill-type-size-h2); }
.ill-heading--h3 { font-size: var(--ill-type-size-h3); }
.ill-heading--h4 { font-size: var(--ill-type-size-h4); }

.ill-copy,
.ill-copy p {
  font-family: var(--ill-font-family-body);
  font-size: var(--ill-type-size-body);
  line-height: var(--ill-type-lh-body);
}
.ill-copy--lead,
.ill-copy--lead p {
  font-size: var(--ill-type-size-lead);
  line-height: var(--ill-type-lh-copy);
}

/* H1 / H2 branding tokens */
h1:not(.ill-heading--h3),
.wp-block-heading h1,
h1.wp-block-heading,
.editor-styles-wrapper h1 {
  font-family: var(--ill-h1-font, var(--ill-headline-font));
  font-weight: var(--ill-h1-weight, var(--ill-type-fw-semibold));
  font-size: var(--ill-h1-size, var(--ill-type-size-h1));
  line-height: var(--ill-h1-line-height, var(--ill-type-lh-headline));
  letter-spacing: var(--ill-h1-letter-spacing, 0em);
  text-transform: var(--ill-h1-transform, none);
  color: var(--ill-h1-color, var(--ill-primary));
}

h2:not(.ill-heading--h3),
.wp-block-heading h2,
h2.wp-block-heading,
.editor-styles-wrapper h2 {
  font-family: var(--ill-h2-font, var(--ill-headline-font));
  font-weight: var(--ill-h2-weight, var(--ill-type-fw-regular));
  font-size: var(--ill-h2-size, var(--ill-type-size-h2));
  line-height: var(--ill-h2-line-height, var(--ill-type-lh-title));
  letter-spacing: var(--ill-h2-letter-spacing, 0em);
  text-transform: var(--ill-h2-transform, none);
  color: var(--ill-h2-color, var(--ill-primary));
}
