/**
 * PimentCSS — typography tokens
 * Pairing: Zodiak Bold (headings) + Plus Jakarta Sans (body)
 */

/* Prefer self-hosted fonts when present (see fonts/README.md) */
@import "../styles/fonts.local.css";

:root {
  --font-family-heading: "Zodiak", "Georgia", "Times New Roman", serif;
  --font-family-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  --font-size-heading-h1: 3.75rem;
  --line-height-heading-h1: 4.5rem;
  --letter-spacing-heading-h1: -0.075rem;

  --font-size-heading-h2: 3rem;
  --line-height-heading-h2: 3.6rem;
  --letter-spacing-heading-h2: -0.06rem;

  --font-size-heading-h3: 2.5rem;
  --line-height-heading-h3: 3rem;
  --letter-spacing-heading-h3: -0.05rem;

  --font-size-heading-h4: 2rem;
  --line-height-heading-h4: 2.4rem;
  --letter-spacing-heading-h4: -0.04rem;

  --font-size-heading-h5: 1.5rem;
  --line-height-heading-h5: 1.8rem;
  --letter-spacing-heading-h5: -0.03rem;

  --font-size-heading-h6: 1.25rem;
  --line-height-heading-h6: 1.5rem;
  --letter-spacing-heading-h6: -0.025rem;

  --font-size-body-small: 0.75rem;
  --line-height-body-small: 1.3125rem;
  --letter-spacing-body-small: 0.015rem;

  --font-size-body-medium: 1rem;
  --line-height-body-medium: 1.6rem;
  --letter-spacing-body-medium: 0.02rem;

  --font-size-body-large: 1.25rem;
  --line-height-body-large: 2rem;
  --letter-spacing-body-large: 0.025rem;

  --font-size-caption: 0.875rem;
  --line-height-caption: 1.53125rem;
  --letter-spacing-caption: 0.0175rem;
}

.heading-h1,
.heading-h2,
.heading-h3,
.heading-h4,
.heading-h5,
.heading-h6 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--text-headings);
}

.heading-h1 {
  font-size: var(--font-size-heading-h1);
  line-height: var(--line-height-heading-h1);
  letter-spacing: var(--letter-spacing-heading-h1);
}

.heading-h2 {
  font-size: var(--font-size-heading-h2);
  line-height: var(--line-height-heading-h2);
  letter-spacing: var(--letter-spacing-heading-h2);
}

.heading-h3 {
  font-size: var(--font-size-heading-h3);
  line-height: var(--line-height-heading-h3);
  letter-spacing: var(--letter-spacing-heading-h3);
}

.heading-h4 {
  font-size: var(--font-size-heading-h4);
  line-height: var(--line-height-heading-h4);
  letter-spacing: var(--letter-spacing-heading-h4);
}

.heading-h5 {
  font-size: var(--font-size-heading-h5);
  line-height: var(--line-height-heading-h5);
  letter-spacing: var(--letter-spacing-heading-h5);
}

.heading-h6 {
  font-size: var(--font-size-heading-h6);
  line-height: var(--line-height-heading-h6);
  letter-spacing: var(--letter-spacing-heading-h6);
}

.body-small,
.body-medium,
.body-large {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  color: var(--text-body);
}

.body-small {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  letter-spacing: var(--letter-spacing-body-small);
}

.body-medium {
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
}

.body-large {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--letter-spacing-body-large);
}

.body-medium--semibold {
  font-weight: var(--font-weight-semi-bold);
}