/* ==========================================================================
   HWI Pellets / Hardwoodindustry Typography Hierarchy
   Exact specification mapping for Space Grotesk & DM Sans
   ========================================================================== */

/* Base Typography Reset & Default */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--color-text-dark);
  background-color: var(--color-canvas-base);
}

/* Headings: Space Grotesk */
h1, h2, h3, h4, h5, h6,
.font-display,
.font-h1,
.font-h2,
.font-h3,
.font-h4,
.font-subheading {
  font-family: var(--font-family-headings);
  color: var(--color-forest-green);
  margin: 0;
  letter-spacing: 0px;
}

/* Display / Hero */
.text-display,
h1.hero-title {
  font-family: var(--font-family-headings);
  font-size: 60px;
  font-weight: 700;
  line-height: 78px;
  letter-spacing: 0px;
}

/* Heading 1 */
h1, .text-h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0px;
}

/* Heading 2 */
h2, .text-h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
}

/* Heading 2 Alt (DM Sans for body section accents) */
.text-h2-alt {
  font-family: var(--font-family-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
  color: var(--color-forest-green);
}

/* Heading 3 */
h3, .text-h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
}

/* Heading 4 */
h4, .text-h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0px;
}

/* Subheading */
.text-subheading,
.subheading {
  font-family: var(--font-family-headings);
  font-size: 18px;
  font-weight: 600;
  line-height: 24.75px;
  letter-spacing: 0px;
}

/* Body Standard */
p, .text-body-standard {
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  color: var(--color-text-dark);
}

/* Body Default / Compact */
.text-body-default,
.text-body-compact {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22.75px;
  letter-spacing: 0px;
}

/* Secondary Body Text */
.text-secondary {
  color: var(--color-text-secondary);
}

/* Interactive Text / Button Label */
.text-button-label {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0px;
}

/* Small Form Label */
.text-label-small,
label.form-label {
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0px;
  color: var(--color-forest-green);
}

/* Monospace / Technical Text */
code, pre, .text-mono {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
}

/* Text on Dark Backgrounds */
.dark-surface,
.bg-dark {
  color: var(--color-text-on-dark);
}
.dark-surface h1, .dark-surface h2, .dark-surface h3, .dark-surface h4,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 {
  color: var(--color-text-on-dark);
}
.dark-surface p,
.bg-dark p {
  color: var(--color-text-on-dark-secondary);
}
.dark-surface .text-muted,
.bg-dark .text-muted {
  color: var(--color-text-on-dark-tertiary);
}

/* Responsive Typography Rules */
@media (max-width: 1024px) {
  .text-display,
  h1.hero-title {
    font-size: 48px;
    line-height: 60px;
  }
  h1, .text-h1 {
    font-size: 26px;
    line-height: 32px;
  }
  h2, .text-h2 {
    font-size: 22px;
    line-height: 28px;
  }
}

@media (max-width: 640px) {
  .text-display,
  h1.hero-title {
    font-size: 36px;
    line-height: 44px;
  }
  h1, .text-h1 {
    font-size: 24px;
    line-height: 30px;
  }
  h2, .text-h2 {
    font-size: 20px;
    line-height: 26px;
  }
  p, .text-body-standard {
    font-size: 15px;
    line-height: 22px;
  }
  .text-body-default {
    font-size: 14px;
    line-height: 20px;
  }
}