:root {
  --teal: #00857E;
  --dark-teal: #016964;
  --light-teal: #BFE1E0;
  --burnt-orange: #DB563C;
  --golden-yellow: #F5B21A;
  --leaf-green: #548446;
  --black: #0B0B0B;
  --white: #FFFFFF;
  --light-green: #B1E795;
  --bright-green: #12881E;
  --light-yellow: #F4DD88;
  --dark-brown: #332419;
  --orange-brown: #A55F0D;
  --bubblegum: #FF808D;
  --raspberry: #C52031;
  --slate-100: #EDEDEF;
  --slate-200: #C9CAD0;
  --slate-300: #A5A6B1;
  --slate-400: #818393;
  --slate-500: #5D6074;
  --slate-600: #45475B;
  --slate-700: #383A49;
  --slate-800: #25262F;

  --color-base: var(--teal);
  --color-base-alt: var(--burnt-orange);
  --color-secondary: var(--golden-yellow);
  --color-secondary-alt: var(--leaf-green);
  --color-success-light: var(--light-green);
  --color-success-dark: var(--bright-green);
  --color-warning-light: var(--light-yellow);
  --color-warning-dark: var(--orange-brown);
  --color-danger-light: var(--bubblegum);
  --color-danger-dark: var(--raspberry);
  --color-button: var(--teal);
  --color-button-hover: var(--dark-teal);
  --color-button-secondary: var(--light-teal);
  --color-button-secondary-text: var(--dark-teal);
  --color-button-secondary-hover: var(--teal);

  --font-family-body: "Montserrat", serif;
  --font-family-headings: "Josefin Sans", serif;

  --font-size-slide-content-heading: 38px;
  --font-size-slide-content-access-code: 62px;
  --font-size-classroom-body: 32px;
  --font-size-body: 16px;
  --font-size-small: 12px;
  --font-size-body-lg: 24px;
  --font-size-h1-dynamic: calc(100% + 2vw);
  --font-size-h2-dynamic: calc(100% + 1.4vw);
  --font-size-body-dynamic: calc(100% + 1vw);
  --font-size-slide-fixed: 20px;

  --line-height-body: 1.5rem;
  --line-height-headings: 1.2;
  --line-height-body-large: 2rem;
  --line-height-dynamic: 1.5;

  --font-weight-normal: 400;
  --font-weight-bold: 700;

  --spacing-base: 1rem;
  --spacing-medium: 1.5rem;
  --spacing-large: 2rem;
  --spacing-x-large: 4rem;
  --spacing-small: 0.5rem;

  --border-radius-pill: 100rem;
  --border-radius-sm: 1rem;
  --border-radius-md: 2rem;
  --border-width: 7px;

  --breakpoint-small: 500px;
  --breakpoint-medium: 768px;
  --breakpoint-large: 1024px;
  --breakpoint-x-large: 1200px;
}