/* https://www.figma.com/design/qwYubbFJC6FVIjO4rcdFdA/TimberTech-WordPress-Design-System-2025--WIP-?node-id=1494-3054&t=fBBAzL5HG6e8YKhe-4 */

/* Heading Font Sizes */
:root {
  --body-font-size-lg: var(--body-font-size-m);
  --body-font-size-base: var(--body-font-size-ms);
  --body-font-size-sm: var(--body-font-size-xs);
  --heading-font-size-h1: 40px;
  --heading-font-size-h2: 34px;
  --heading-font-size-h3: 28px;
  --heading-font-size-h4: 22px;
  --heading-font-size-h5: 18px;
  --heading-font-size-h6: 16px;
}

@media (width >= 768px) {
  :root {
    --body-font-size-lg: var(--body-font-size-l);
    --body-font-size-base: var(--body-font-size-ms);
    --body-font-size-sm: var(--body-font-size-xs);
    --heading-font-size-h1: 46px;
    --heading-font-size-h2: 34px;
    --heading-font-size-h3: 28px;
    --heading-font-size-h4: 22px;
    --heading-font-size-h5: 18px;
    --heading-font-size-h6: 14px;
  }
}

@media (width >= 1024px) {
  :root {
    --body-font-size-lg: var(--body-font-size-l);
    --body-font-size-base: var(--body-font-size-m);
    --body-font-size-sm: var(--body-font-size-xs);
    --heading-font-size-h1: 62px;
    --heading-font-size-h2: 38px;
    --heading-font-size-h3: 32px;
    --heading-font-size-h4: 26px;
    --heading-font-size-h5: 20px;
    --heading-font-size-h6: 16px;
  }
}

body,
.body-text {
  font-size: var(--body-font-size-base);
  line-height: 150%;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 400;
  scroll-margin: 40px;
  color: var(--color-coal);
}

h1,
.h1 {
  font-size: var(--heading-font-size-h1);
  line-height: 116.7%;
}

h2,
.h2 {
  font-size: var(--heading-font-size-h2);
  line-height: 121.5%;
}

h3,
.h3 {
  font-size: var(--heading-font-size-h3);
  line-height: 125%;
}

h4,
.h4 {
  font-size: var(--heading-font-size-h4);
  line-height: 130%;
}

h5,
.h5 {
  font-size: var(--heading-font-size-h5);
  line-height: 137.5%;
}

h6,
.h6 {
  font-size: var(--heading-font-size-h6);
  line-height: 140%;
}