/* 
TABLE OF CONTENTS 
- CSS vars
- Typography
- Helpers
*/

:root {
  --serif-ff: "PT Serif", serif;
  --sans-ff: "Source Sans Pro", Arial, sans-serif;

  --hero-purple: #4e2d82;
  --lite-purple: #9c28b1;
  --orchid: #b4005b;
  --forge-blue: #0466b4;
  --peacock: #4db2ca;
  --honey: #f3a61c;
  --lime-green: #589c48;
  --cream: #f2ecde;
  --gray: #6d6e6f;

  --black: #000000;
  --white: #ffffff;
  --ltgray: #eeeeee;
  --mdgray: #cccccc;

  --cta-color: var(--white);
  --cta-bg: var(--forge-blue);
  --cta-bg-hover: #005496;
  --cta-primary-bg: #62bb26;
  --cta-primary-bg-hover: #0f8a07;
  --cta-text-color: var(--forge-blue);
  --cta-text-color-hover: var(--forge-blue);

  /* Headings */
  --re-h1-fs: 80px;
  --re-h1-lh: 86px;
  --re-h2-fs: 60px;
  --re-h2-lh: 66px;
  --re-h3-fs: 46px;
  --re-h3-lh: 52px;
  --re-h4-fs: 36px;
  --re-h4-lh: 42px;
  --re-h5-fs: 31px;
  --re-h5-lh: 38px;
  --re-h6-fs: 25px;
  --re-h6-lh: 31px;

  /* Mobile */
  --re-m-h1-fs: 40px;
  --re-m-h1-lh: 46px;
  --re-m-h2-fs: 36px;
  --re-m-h2-lh: 42px;
  --re-m-h3-fs: 31px;
  --re-m-h3-lh: 38px;
  --re-m-h4-fs: 25px;
  --re-m-h4-lh: 31px;

  /* Sub-headings */
  --re-sh1-fs: 26px;
  --re-sh1-lh: 32px;
  --re-sh2-fs: 22px;
  --re-sh2-lh: 28px;
  --re-sh3-fs: 18px;
  --re-sh3-lh: 24px;
  --re-sh4-fs: 16px;
  --re-sh4-lh: 22px;
  --re-sh5-fs: 16px;
  --re-sh5-lh: 22px;

  /* Paragraphs */
  --re-p1-fs: 19px;
  --re-p1-lh: 26px;
  --re-p2-fs: 17px;
  --re-p2-lh: 24px;
  --re-p3-fs: 15px;
  --re-p3-lh: 21px;
  --re-p4-fs: 12px;
  --re-p4-lh: 18px;
  --re-pi-fs: 26px;
  --re-pi-lh: 33px;

  /* Links */
  --re-link-fs: 17px;
  --re-link-lh: 24px;
  --re-l1-fs: 15px;
  --re-l1-lh: 21px;
  --re-nav2-fs: 13px;
  --re-nav2-lh: 19px;
}

/**** typography ****/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--serif-ff);
  font-weight: 600;
  color: var(--hero-purple);
}

h1 {
  font-size: var(--re-h3-fs);
  line-height: var(--re-h3-lh);
}

h2 {
  font-size: var(--re-sh1-fs);
  line-height: var(--re-sh1-lh);
}

h3 {
  font-size: var(--re-sh2-fs);
  line-height: var(--re-sh2-lh);
}

h4 {
  font-size: var(--re-sh3-lh);
  line-height: var(--re-sh3-fs);
}

h5 {
  font-size: var(--re-sh4-lh);
  line-height: var(--re-sh4-fs);
}

h6 {
  font-size: var(--re-p3-lh);
  line-height: var(--re-p3-fs);
}

p {
  font-size: var(--re-p1-fs);
  line-height: var(--re-p1-lh);
  color: var(--black);
  margin: 10px 0;
}

p.small {
  font-size: var(--re-p2-fs);
  line-height: var(--re-p2-lh);
}

p.xsmall {
  font-size: var(--re-p3-fs);
  line-height: var(--re-p3-lh);
}

small {
  font-size: var(--re-p4-fs);
  line-height: var(--re-p4-lh);
}

strong {
  font-weight: 600;
}

b {
  font-weight: 700;
}

/****  links  ****/
a {
  color: var(--cta-text-color);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: var(--cta-text-color-hover);
}

a:active {
  color: var(--cta-text-color);
  border-bottom-color: var(--cta-text-color);
}

a:hover,
a:focus,
a:active {
  outline: none;
  text-decoration: none;
}

a:visited {
  color: var(--cta-text-color);
  border-bottom-color: var(--cta-text-color);
}

/****  button  ****/
.cta-btn {
  display: inline-block;
  background-color: var(--cta-bg);
  border: 2px solid var(--cta-bg);
  border-radius: 3px;
  font-size: var(--re-p2-fs);
  line-height: 12px;
  text-align: center;
  cursor: pointer;
  transition-property: background-color, border-color, box-shadow, color;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
  padding: 12px 10px;
}

.cta-btn:hover {
  background-color: var(--cta-bg-hover);
  box-shadow: 0 3px 8px 0 rgb(0 0 0 / 40%);
}

.cta-btn a {
  color: var(--cta-color);
  font-size: 18px;
}

.cta-btn.primary {
  display: inline-block;
  min-width: 180px;
  height: 40px;
  background-color: var(--cta-primary-bg);
  border: 2px solid var(--cta-primary-bg);
  border-radius: 20px;
  line-height: 12px;
  text-align: center;
  cursor: pointer;
  transition-property: background-color, border-color, color;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
  padding: 12px 40px;
}

.cta-btn.primary:hover {
  background-color: var(--cta-primary-bg-hover);
  border-color: var(--cta-primary-bg-hover);
}

/****  Helpers  ****/
/** font **/
.serif {
  font-family: var(--serif-ff) !important;
}

.sans {
  font-family: var(--sans-ff) !important;
}

/** font-weight **/
.reg {
  font-weight: 400 !important;
}

.md {
  font-weight: 500 !important;
}

/** font-size **/
.h1 {
  font-size: var(--re-h1-fs) !important;
  line-height: var(--re-h1-lh) !important;
}

.h2 {
  font-size: var(--re-h2-fs) !important;
  line-height: var(--re-h2-lh) !important;
}

.h3 {
  font-size: var(--re-h3-fs) !important;
  line-height: var(--re-h3-lh) !important;
}

.h4 {
  font-size: var(--re-h4-fs) !important;
  line-height: var(--re-h4-lh) !important;
}

.h5 {
  font-size: var(--re-h5-fs) !important;
  line-height: var(--re-h5-lh) !important;
}

.h6 {
  font-size: var(--re-h6-fs) !important;
  line-height: var(--re-h6-lh) !important;
}

.sh1 {
  font-size: var(--re-sh1-fs) !important;
  line-height: var(--re-sh1-lh) !important;
}

.sh2 {
  font-size: var(--re-sh2-fs) !important;
  line-height: var(--re-sh2-lh) !important;
}

.sh3 {
  font-size: var(--re-sh3-fs) !important;
  line-height: var(--re-sh3-lh) !important;
}

.sh4 {
  font-size: var(--re-sh4-fs) !important;
  line-height: var(--re-sh4-lh) !important;
}

.sh5 {
  font-size: var(--re-sh5-fs) !important;
  line-height: var(--re-sh5-lh) !important;
}

.p1 {
  font-size: var(--re-p1-fs) !important;
  line-height: var(--re-p1-lh) !important;
}

.p2 {
  font-size: var(--re-p2-fs) !important;
  line-height: var(--re-p2-lh) !important;
}

.p3 {
  font-size: var(--re-p3-fs) !important;
  line-height: var(--re-p3-lh) !important;
}

.p4 {
  font-size: var(--re-p4-fs) !important;
  line-height: var(--re-p4-lh) !important;
}

.pi {
  font-size: var(--re-pi-fs) !important;
  line-height: var(--re-pi-lh) !important;
}

/** color **/
.hero-purple {
  color: var(--hero-purple) !important;
}
.lite-purple {
  color: var(--lite-purple) !important;
}
.orchid {
  color: var(--orchid) !important;
}
.forge-blue {
  color: var(--forge-blue) !important;
}
.peacock {
  color: var(--peacock) !important;
}
.honey {
  color: var(--honey) !important;
}
.lime-green {
  color: var(--lime-green) !important;
}
.cream {
  color: var(--cream) !important;
}
.gray {
  color: var(--gray) !important;
}
.white {
  color: var(--white) !important;
}

.black {
  color: var(--black) !important;
}

/** background **/
.bg-hero-purple {
  background-color: var(--hero-purple) !important;
}
.bg-lite-purple {
  background-color: var(--lite-purple) !important;
}
.bg-orchid {
  background-color: var(--orchid) !important;
}
.bg-forge-blue {
  background-color: var(--forge-blue) !important;
}
.bg-peacock {
  background-color: var(--peacock) !important;
}
.bg-honey {
  background-color: var(--honey) !important;
}
.bg-lime-green {
  background-color: var(--lime-green) !important;
}
.bg-cream {
  background-color: var(--cream) !important;
}
.bg-gray {
  background-color: var(--gray) !important;
}
.bg-ltgray {
  background-color: var(--ltgray) !important;
}
.bg-white {
  background-color: var(--white) !important;
}

.bg-black {
  background-color: var(--black) !important;
}

/** lists **/
.ul-no-style {
  list-style: none !important;
}

/** pointer **/
.pointer-none {
  pointer-events: none;
}

/** divider **/
.divider {
  width: 50px;
  height: 3px;
  display: block;
  background: var(--gray);
  margin: 0;
}