:root {
  --color-evergreen: #004b41;
  --color-aqua-green: #2a9d8f;
  --color-marigold: #f4a261;
  --color-bright-orange: #f15a24;
  --color-fog: #f5f8f7;
  --color-cloud: #e8eeed;
  --color-charcoal: #0e1d1b;
  --font-family-primary: "Kanit", sans-serif;
  --sby-heading-font-family: var(--font-family-primary);
  --sby-heading-font-weight: 700;
  --sby-h1-font-size: 24px;
  --sby-h2-font-size: 20px;
  --sby-h3-font-size: 16px;
  --sby-heading-line-height: 1.1;
  --sby-copy-font-size: 12px;
  --sby-copy-font-weight: 400;
  --sby-copy-line-height: 1.55;
  --sby-eyebrow-font-size: 12px;
  --sby-eyebrow-font-weight: 400;
  --sby-eyebrow-line-height: 1;
}

body {
  font-family: var(--font-family-primary);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-charcoal);
  font-family: var(--sby-heading-font-family);
  font-weight: var(--sby-heading-font-weight);
  line-height: var(--sby-heading-line-height);
}

h1 {
  font-size: var(--sby-h1-font-size);
  text-transform: uppercase;
}

h2 {
  font-size: var(--sby-h2-font-size);
  text-transform: uppercase;
}

h3 {
  font-size: var(--sby-h3-font-size);
}

p {
  font-family: var(--font-family-primary);
  font-size: var(--sby-copy-font-size);
  font-weight: var(--sby-copy-font-weight);
  line-height: var(--sby-copy-line-height);
}

.sby-headline--charcoal {
  color: var(--color-charcoal);
}

.sby-headline--fog {
  color: var(--color-fog);
}

.sby-headline--aqua-green {
  color: var(--color-aqua-green);
}

.sby-headline--bright-orange {
  color: var(--color-bright-orange);
}

.sby-headline--evergreen {
  color: var(--color-evergreen);
}

.sby-headline--marigold {
  color: var(--color-marigold);
}

.sby-copy {
  margin: 0;
  font-size: var(--sby-copy-font-size);
  font-weight: var(--sby-copy-font-weight);
  line-height: var(--sby-copy-line-height);
}

.sby-copy--charcoal {
  color: var(--color-charcoal);
}

.sby-copy--fog {
  color: var(--color-fog);
}

.sby-copy--bright-orange {
  color: var(--color-bright-orange);
}

.sby-copy--aqua-green {
  color: var(--color-aqua-green);
}

.sby-copy--evergreen {
  color: var(--color-evergreen);
}

.sby-copy--marigold {
  color: var(--color-marigold);
}

.sby-eyebrow {
  margin: 0;
  font-size: var(--sby-eyebrow-font-size);
  font-weight: var(--sby-eyebrow-font-weight);
  line-height: var(--sby-eyebrow-line-height);
}

.sby-eyebrow--bright-orange {
  color: var(--color-bright-orange);
}

.sby-eyebrow--fog {
  color: var(--color-fog);
}

.sby-eyebrow--charcoal {
  color: var(--color-charcoal);
}

.sby-eyebrow--aqua-green {
  color: var(--color-aqua-green);
}

.sby-eyebrow--evergreen {
  color: var(--color-evergreen);
}

.sby-eyebrow--marigold {
  color: var(--color-marigold);
}