:root {
  --primary-100: #FDFDFE;
  --primary-200: #FBFCFE;
  --primary-300: #F1F5FC;
  --primary-400: #ECF1FB;
  --primary-500: #BCC0C8;
  --primary-600: #5E6064;
  --primary-700: #46484B;
  --secondary-100: #E7EAEC;
  --secondary-200: #CFD5DA;
  --secondary-300: #596E80;
  --secondary-400: #13314A;
  --secondary-500: #0F273B;
  --secondary-600: #07131D;
  --secondary-700: #050E16;
  --accent-100: #EFF3FB;
  --accent-200: #E0E8F8;
  --accent-300: #93B1E7;
  --accent-400: #6590DD;
  --accent-500: #5073B0;
  --accent-600: #283958;
  --accent-700: #1E2B42;
  --contrast-100: #F1F2F4;
  --contrast-200: #E4E6EA;
  --contrast-300: #A1A8B6;
  --contrast-400: #798497;
  --contrast-500: #606978;
  --contrast-600: #30343C;
  --contrast-700: #24272D;
  --neutral-100: #F2F2F2;
  --neutral-200: #DADADA;
  --neutral-300: #B6B6B6;
  --neutral-400: #858585;
  --neutral-500: #545454;
  --neutral-600: #242424;
  --neutral-700: #0C0C0C;
  --black: #0d1a1c;
  --offblack: #272727;
  --offwhite: #f1f2f3;
  --white: #fff;
}

/* background colors, button colors */
.primary-100, .btn-primary-100:hover { color: var(--primary-100); }
.primary-200, .btn-primary-200:hover { color: var(--primary-200); }
.primary-300, .btn-primary-300:hover { color: var(--primary-300); }
.primary-400, .btn-primary-400:hover { color: var(--primary-400); }
.primary-500, .btn-primary-500:hover, .primary-links a { color: var(--primary-500); }
.primary-600, .btn-primary-600:hover { color: var(--primary-600); }
.primary-700, .btn-primary-700:hover { color: var(--primary-700); }
.primary-100-bg, .btn-primary-100 { background: var(--primary-100); }
.primary-200-bg, .btn-primary-200 { background: var(--primary-200); }
.primary-300-bg, .btn-primary-300 { background: var(--primary-300); }
.primary-400-bg, .btn-primary-400 { background: var(--primary-400); }
.primary-500-bg, .btn-primary-500 { background: var(--primary-500); }
.primary-600-bg, .btn-primary-600 { background: var(--primary-600); }
.primary-700-bg, .btn-primary-700 { background: var(--primary-700); }
.secondary-100, .btn-secondary-100:hover { color: var(--secondary-100); }
.secondary-200, .btn-secondary-200:hover { color: var(--secondary-200); }
.secondary-300, .btn-secondary-300:hover { color: var(--secondary-300); }
.secondary-400, .btn-secondary-400:hover { color: var(--secondary-400); }
.secondary-500, .btn-secondary-500:hover, .secondary-links a { color: var(--secondary-500); }
.secondary-600, .btn-secondary-600:hover { color: var(--secondary-600); }
.secondary-700, .btn-secondary-700:hover { color: var(--secondary-700); }
.secondary-800, .btn-secondary-800:hover { color: var(--secondary-800); }
.secondary-100-bg, .btn-secondary-100 { background: var(--secondary-100); }
.secondary-200-bg, .btn-secondary-200 { background: var(--secondary-200); }
.secondary-300-bg, .btn-secondary-300 { background: var(--secondary-300); }
.secondary-400-bg, .btn-secondary-400 { background: var(--secondary-400); }
.secondary-500-bg, .btn-secondary-500 { background: var(--secondary-500); }
.secondary-600-bg, .btn-secondary-600 { background: var(--secondary-600); }
.secondary-700-bg, .btn-secondary-700 { background: var(--secondary-700); }
.accent-100, .btn-accent-100:hover { color: var(--accent-100); }
.accent-200, .btn-accent-200:hover { color: var(--accent-200); }
.accent-300, .btn-accent-300:hover { color: var(--accent-300); }
.accent-400, .btn-accent-400:hover { color: var(--accent-400); }
.accent-500, .btn-accent-500:hover, .accent-links a  { color: var(--accent-500); }
.accent-600, .btn-accent-600:hover { color: var(--accent-600); }
.accent-700, .btn-accent-700:hover { color: var(--accent-700); }
.accent-100-bg, .btn-accent-100 { background: var(--accent-100); }
.accent-200-bg, .btn-accent-200 { background: var(--accent-200); }
.accent-300-bg, .btn-accent-300 { background: var(--accent-300); }
.accent-400-bg, .btn-accent-400 { background: var(--accent-400); }
.accent-500-bg, .btn-accent-500 { background: var(--accent-500); }
.accent-600-bg, .btn-accent-600 { background: var(--accent-600); }
.accent-700-bg, .btn-accent-700 { background: var(--accent-700); }
.contrast-100, .btn-contrast-100:hover { color: var(--contrast-100); }
.contrast-200, .btn-contrast-200:hover { color: var(--contrast-200); }
.contrast-300, .btn-contrast-300:hover { color: var(--contrast-300); }
.contrast-400, .btn-contrast-400:hover { color: var(--contrast-400); }
.contrast-500, .btn-contrast-500:hover, .contrast-links a { color: var(--contrast-500); }
.contrast-600, .btn-contrast-600:hover { color: var(--contrast-600); }
.contrast-700, .btn-contrast-700:hover { color: var(--contrast-700); }
.contrast-100-bg, .btn-contrast-100 { background: var(--contrast-100); }
.contrast-200-bg, .btn-contrast-200 { background: var(--contrast-200); }
.contrast-300-bg, .btn-contrast-300 { background: var(--contrast-300); }
.contrast-400-bg, .btn-contrast-400 { background: var(--contrast-400); }
.contrast-500-bg, .btn-contrast-500 { background: var(--contrast-500); }
.contrast-600-bg, .btn-contrast-600 { background: var(--contrast-600); }
.contrast-700-bg, .btn-contrast-700 { background: var(--contrast-700); }
.neutral-100, .btn-neutral-100:hover { color: var(--neutral-100); }
.neutral-200, .btn-neutral-200:hover { color: var(--neutral-200); }
.neutral-300, .btn-neutral-300:hover { color: var(--neutral-300); }
.neutral-400, .btn-neutral-400:hover { color: var(--neutral-400); }
.neutral-500, .btn-neutral-500:hover, .neutral-links a { color: var(--neutral-500); }
.neutral-600, .btn-neutral-600:hover { color: var(--neutral-600); }
.neutral-700, .btn-neutral-700:hover { color: var(--neutral-700); }
.neutral-100-bg, .btn-neutral-100 { background: var(--neutral-100); }
.neutral-200-bg, .btn-neutral-200 { background: var(--neutral-200); }
.neutral-300-bg, .btn-neutral-300 { background: var(--neutral-300); }
.neutral-400-bg, .btn-neutral-400 { background: var(--neutral-400); }
.neutral-500-bg, .btn-neutral-500 { background: var(--neutral-500); }
.neutral-600-bg, .btn-neutral-600 { background: var(--neutral-600); }
.neutral-700-bg, .btn-neutral-700 { background: var(--neutral-700); }

/* border-colors */
.btn { color:var(--black); } /* default button color */
.btn-primary-100, .bc-primary-100 { border-color: var(--primary-100); }
.btn-primary-200, .bc-primary-200 { border-color: var(--primary-200); }
.btn-primary-300, .bc-primary-300 { border-color: var(--primary-300); }
.btn-primary-400, .bc-primary-400 { border-color: var(--primary-400); color:var(--white); }
.btn-primary-500, .bc-primary-500 { border-color: var(--primary-500); color:var(--white); }
.btn-primary-600, .bc-primary-600 { border-color: var(--primary-600); color:var(--white); }
.btn-primary-700, .bc-primary-700 { border-color: var(--primary-700); color:var(--white); }

.btn-secondary-100, .bc-secondary-100 { border-color: var(--secondary-100); }
.btn-secondary-200, .bc-secondary-200 { border-color: var(--secondary-200); }
.btn-secondary-300, .bc-secondary-300 { border-color: var(--secondary-300); }
.btn-secondary-400, .bc-secondary-400 { border-color: var(--secondary-400); color:var(--white); }
.btn-secondary-500, .bc-secondary-500 { border-color: var(--secondary-500); color:var(--white); }
.btn-secondary-600, .bc-secondary-600 { border-color: var(--secondary-600); color:var(--white); }
.btn-secondary-700, .bc-secondary-700 { border-color: var(--secondary-700); color:var(--white); }

.btn-accent-100, .bc-accent-100 { border-color: var(--accent-100); }
.btn-accent-200, .bc-accent-200 { border-color: var(--accent-200); }
.btn-accent-300, .bc-accent-300 { border-color: var(--accent-300); }
.btn-accent-400, .bc-accent-400 { border-color: var(--accent-400); color:var(--white); }
.btn-accent-500, .bc-accent-500 { border-color: var(--accent-500); color:var(--white); }
.btn-accent-600, .bc-accent-600 { border-color: var(--accent-600); color:var(--white); }
.btn-accent-700, .bc-accent-700 { border-color: var(--accent-700); color:var(--white); }

.btn-contrast-100, .bc-contrast-100 { border-color: var(--contrast-100); }
.btn-contrast-200, .bc-contrast-200 { border-color: var(--contrast-200); }
.btn-contrast-300, .bc-contrast-300 { border-color: var(--contrast-300); }
.btn-contrast-400, .bc-contrast-400 { border-color: var(--contrast-400); }
.btn-contrast-500, .bc-contrast-500 { border-color: var(--contrast-500); color:var(--white); }
.btn-contrast-600, .bc-contrast-600 { border-color: var(--contrast-600); color:var(--white); }
.btn-contrast-700, .bc-contrast-700 { border-color: var(--contrast-700); color:var(--white); }

.btn-neutral-100, .bc-neutral-100 { border-color: var(--neutral-100); }
.btn-neutral-200, .bc-neutral-200 { border-color: var(--neutral-200); }
.btn-neutral-300, .bc-neutral-300 { border-color: var(--neutral-300); }
.btn-neutral-400, .bc-neutral-400 { border-color: var(--neutral-400); }
.btn-neutral-500, .bc-neutral-500 { border-color: var(--neutral-500); color:var(--white); }
.btn-neutral-600, .bc-neutral-600 { border-color: var(--neutral-600); color:var(--white); }
.btn-neutral-700, .bc-neutral-700 { border-color: var(--neutral-700); color:var(--white); }


/* white and black buttons*/
.btn-offwhite { border-color: var(--offwhite); }
.btn-white { border-color: var(--white); }
.btn-gray { border-color: var(--gray); }
.btn-offblack { border-color: var(--offblack); }
.btn-black { border-color: var(--black); }
.btn-white { background-color: var(--white); border: 2px solid var(--white); color:var(--black); }
.btn-white:hover { background-color: transparent; border: 2px solid var(--white); color:var(--white); }
.btn-white.outline { color: var(--white); }
.btn-white.outline:hover { background-color: var(--white); color:var(--black); }
.btn-offwhite { background-color: var(--offwhite); border: 2px solid var(--offwhite); color:var(--black); }
.btn-offwhite:hover { background-color: transparent; border: 2px solid var(--offwhite); color:var(--offwhite); }
.btn-offwhite.outline { color: var(--offwhite); }
.btn-offwhite.outline:hover { background-color: var(--offwhite); color:var(--black); }
.btn-black, .btn-offblack, .btn-gray { color:var(--white); }

/* hover colors */
.btn-black:hover { color:var(--black); }
.btn-black:hover { color:var(--black); }
.btn-offblack:hover { color:var(--offblack); }
.btn-gray:hover { color:var(--gray); }

/* outline buttons */
.btn-black.outline { color: var(--black); }
.btn-black.outline:hover { background-color: var(--black); color:var(--white); }
.btn-offblack.outline { color: var(--offblack); }
.btn-offblack.outline:hover { background-color: var(--offblack); color:var(--white); }

.black, .black-links a { color:var(--black); }
.offblack { color:var(--offblack); }
.gray { color:var(--gray); }
.offwhite { color:var(--offwhite); }
.white, .white-links a { color:var(--white); }

.black-bg, .btn-black { background:var(--black); }
.offblack-bg, .btn-offblack { background:var(--offblack); }
.gray-bg, .btn-gray { background:var(--gray); }
.offwhite-bg, .btn-offwhite { background:var(--offwhite); }
.white-bg, .btn-white { background:var(--white); }

.btn.outline,
.btn:not(.outline):hover { background-color:transparent; }

.bc-none { border: transparent; }
.bw2 { border-style: solid; border-width: 2px; }
.primary-links a { color: var(--primary-600); }
.primary-links a:hover { color: var(--primary-700); }
ul[class*="-marker"] li:not(:last-child) { margin-bottom: 1em; }
.primary-markers li::marker { color: var(--primary-400); }
.secondary-markers li::marker { color: var(--secondary-400); }
.accent-markers li::marker { color: var(--accent-400); }
.contrast-markers li::marker { color: var(--contrast-400); }
.neutral-markers li::marker { color: var(--neutral-400); }
.white-markers li::marker { color: var(--white); }

.fill-current svg { fill: currentColor; }
.fill-primary svg path { fill: var(--primary-400); }
.fill-secondary svg { fill: var(--secondary-400); }
.fill-accent svg { fill: var(--accent-400); }
.fill-contrast svg { fill: var(--contrast-400); }
.fill-neutral svg { fill: var(--neutral-400); }
.fill-white svg { fill: var(--white); }

.grad-100 {
  background: var(--primary-100);
  background: linear-gradient(115deg,var(--primary-100) 0%, var(--secondary-100) 30%, var(--accent-100) 70%, var(--contrast-200) 100%);
}
.grad-200 {
  background: var(--primary-200);
  background: linear-gradient(115deg,var(--primary-200) 0%, var(--secondary-200) 30%, var(--accent-200) 70%, var(--contrast-200) 100%);
}
.grad-300 {
  background: var(--primary-300);
  background: linear-gradient(115deg,var(--primary-300) 0%, var(--secondary-300) 30%, var(--accent-300) 70%, var(--contrast-300) 100%);
}
.grad-400 {
  background: var(--primary-400);
  background: linear-gradient(115deg,var(--primary-400) 0%, var(--secondary-400) 30%, var(--accent-400) 70%, var(--contrast-400) 100%);
}
.grad-500 {
  background: var(--primary-500);
  background: linear-gradient(115deg,var(--primary-500) 0%, var(--secondary-500) 30%, var(--accent-500) 70%, var(--contrast-500) 100%);
}
.grad-600 {
  background: var(--primary-600);
  background: linear-gradient(115deg,var(--primary-600) 0%, var(--secondary-600) 30%, var(--accent-600) 70%, var(--contrast-600) 100%);
}
.grad-700 {
  background: var(--primary-700);
  background: linear-gradient(115deg,var(--primary-700) 0%, var(--secondary-700) 30%, var(--accent-700) 70%, var(--contrast-700) 100%);
}

.grad-primary-secondary-200 {
  background: var(--primary-200);
  background: linear-gradient(45deg, var(--primary-200) 0%, var(--secondary-200) 100%);
}
.grad-secondary-primary-200 {
  background: var(--primary-200);
  background: linear-gradient(45deg, var(--secondary-200) 0%, var(--primary-200) 100%);
}
.grad-primary-accent-200 {
  background: var(--primary-200);
  background: linear-gradient(45deg, var(--primary-200) 0%, var(--accent-200) 100%);
}
.grad-accent-primary-200 {
  background: var(--accent-200);
  background: linear-gradient(45deg, var(--accent-200) 0%, var(--primary-200) 100%);
}
.grad-secondary-accent-200 {
  background: var(--secondary-200);
  background: linear-gradient(45deg, var(--secondary-200) 0%, var(--secondary-200) 100%);
}
.grad-accent-secondary-200 {
  background: var(--accent-200);
  background: linear-gradient(45deg, var(--accent-200) 0%, var(--secondary-200) 100%);
}
.grad-primary-secondary-400 {
  background: var(--primary-400);
  background: linear-gradient(45deg, var(--primary-400) 0%, var(--secondary-400) 100%);
}
.grad-secondary-primary-400 {
  background: var(--primary-400);
  background: linear-gradient(45deg, var(--secondary-400) 0%, var(--primary-400) 100%);
}
.grad-primary-accent-400 {
  background: var(--primary-400);
  background: linear-gradient(45deg, var(--primary-400) 0%, var(--accent-400) 100%);
}
.grad-accent-primary-400 {
  background: var(--accent-400);
  background: linear-gradient(45deg, var(--accent-400) 0%, var(--primary-400) 100%);
}
.grad-secondary-accent-400 {
  background: var(--secondary-400);
  background: linear-gradient(45deg, var(--secondary-400) 0%, var(--accent-400) 100%);
}
.grad-accent-secondary-400 {
  background: var(--accent-400);
  background: linear-gradient(45deg, var(--accent-400) 0%, var(--secondary-400) 100%);
}