/* Theme Name: Erewhon - Typography (revised)
   Description: Typography system without default spacing, with safe fallbacks and utilities */
/* ============================================ */
/* HEADINGS */
/* ============================================ */
/* HEADINGS: balance, sane measure, no hyphens */
:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
  font-family: var(--headline-font);
  color: var(--text-primary);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: balance; /* unsupported browsers ignore */
  hyphens: none;
  overflow-wrap: break-word;
  margin: 0;
}

:where(p, .text-m, .text-l, .text-xl) {
  text-wrap: pretty;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Wider measure for display headings */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  max-width: 100%;
}

/* Standard measure for the rest */
h5, .h5, h6, .h6 {
  max-width: var(--text-max-width);
}

h1, .h1 {
  font-size: var(--h1);
  line-height: var(--lh-heading-display);
  letter-spacing: var(--ls-h-1);
  font-weight: 700;
}

h2, .h2 {
  font-size: var(--h2);
  line-height: var(--lh-heading-large);
  letter-spacing: var(--ls-h-2);
  font-weight: 700;
}

h3, .h3 {
  font-size: var(--h3);
  line-height: var(--lh-heading-standard);
  letter-spacing: var(--ls-h-3);
  font-weight: 700;
}

h4, .h4 {
  font-size: var(--h4);
  line-height: var(--lh-heading-standard);
  letter-spacing: var(--ls-h-4);
  font-weight: 600;
}

h5, .h5 {
  font-size: var(--h5);
  line-height: var(--lh-heading-standard);
  letter-spacing: var(--ls-h-5);
  font-weight: 600;
}

h6, .h6 {
  font-size: var(--h6);
  line-height: var(--lh-heading-standard);
  letter-spacing: var(--ls-h-6);
  font-weight: 600;
}

/* ============================================ */
/* BODY TEXT */
/* ============================================ */
:where(p, .text-xs, .text-s, .text-m-smaller, .text-m, .text-l, .text-xl, .body-text) {
  font-family: var(--body-font);
  font-weight: 400;
  color: var(--text-secondary);
  max-width: var(--text-max-width);
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
  orphans: 3;
  widows: 3;
  margin: 0;
}

p {
  font-size: var(--text-m);
  line-height: var(--lh-text-standard);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--lh-text-tight);
  letter-spacing: var(--ls-text-xs);
  hyphens: none;
}

.text-s {
  font-size: var(--text-s);
  line-height: var(--lh-text-tight);
  letter-spacing: var(--ls-text-s);
  hyphens: none;
}

.text-m-smaller {
  font-size: var(--text-m-smaller);
  line-height: var(--lh-text-standard);
  letter-spacing: var(--ls-text-m);
}

.text-m {
  font-size: var(--text-m);
  line-height: var(--lh-text-standard);
  letter-spacing: var(--ls-text-m);
}

.text-l {
  font-size: var(--text-l);
  line-height: var(--lh-text-loose);
  letter-spacing: var(--ls-text-l);
}

.text-xl {
  font-size: var(--text-xl);
  line-height: var(--lh-text-loose);
  letter-spacing: var(--ls-text-xl);
  font-weight: 500;
}

/* Optional lead paragraph */
.lead {
  font-size: var(--text-xl);
  line-height: var(--lh-text-loose);
  color: var(--text-primary);
}

/* ============================================ */
/* TYPOGRAPHY UTILITIES */
/* ============================================ */
.leading-tight {
  line-height: var(--lh-text-tight) !important;
}

.leading-standard {
  line-height: var(--lh-text-standard) !important;
}

.leading-loose {
  line-height: var(--lh-text-loose) !important;
}

.tracking-tight {
  letter-spacing: var(--ls-text-s) !important;
}

.tracking-normal {
  letter-spacing: var(--ls-text-m) !important;
}

.tracking-wide {
  letter-spacing: 0.05em !important;
}

.text-width-narrow {
  max-width: var(--text-max-width-narrow);
}

.text-width-standard {
  max-width: var(--text-max-width);
}

.text-width-wide {
  max-width: var(--text-max-width-wide);
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.text-no-wrap {
  white-space: nowrap;
}

.text-emphasis {
  font-weight: 500;
  color: var(--text-primary);
}

.text-muted {
  color: var(--text-tertiary);
  font-size: 0.9em;
}

.text-small-caps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

.num-tabular {
  font-variant-numeric: tabular-nums;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}