:root {
  /* Colors */
  --black: #222327;
  --black: #000000;
  --white: #fcfcfc;
  --white--off: #f9f3e6;

  --gray--light: #e8e5e5;
  --gray: #aba8a8;
  --gray--dark: #68696c;

  --green--lightest: #e3fef2;
  --green--lighter: #c1f6df;
  --green--light: #64e9b0;
  --green: #1cc77d;
  --green--dark: #117c4e;
  --green--darkest: #0a4b2f;

  --blue--lightest: #e7f9ff;
  --blue--lighter: #cef2ff;
  --blue--light: #7bd5f8;
  --blue: #2cbcf4;
  --blue--dark: #097eab;
  --blue--darkest: #054b67;

  --yellow--lightest: #fff0d4;
  --yellow--lighter: #ffe6b9;
  --yellow--light: #ffc24f;
  --yellow: #e59500;
  --yellow--dark: #8f5d00;
  --yellow--darkest: #563800;

  --red--lightest: #ffebec;
  --red--lighter: #ffd2d6;
  --red--light: #ff8d99;
  --red: #ff495c;
  --red--dark: #cd0015;
  --red--darkest: #7b000d;

  --gradient: linear-gradient(
    to right,
    var(--blue),
    var(--green)
  );

  /* Color Schemes */
  --background: var(--white);
  --text: var(--black);
  --accent: var(--green--dark);
  --icon: var(--green);

  /* Typography */
  --font-family: soehne, proxima-nova, sans-serif;

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

  --body-font-size: 1rem;
  --body-font-size--mobile: 0.875rem;
  --body-font-weight: var(--font-weight--normal);
  --body-line-height: 1.5em;
  --body-letter-spacing: 0;

  --h1-font: var(--font-family);
  --h1-font-size: 3rem;
  --h1-font-size--mobile: 1.85rem;
  --h1-font-weight: var(--font-weight--normal);
  --h1-line-height: 1.3em;
  --h1-letter-spacing: 0;
  --h1-text-transform: none;

  --h2-font: var(--font-family);
  --h2-font-size: 2.25rem;
  --h2-font-size--mobile: 1.75rem;
  --h2-font-weight: var(--font-weight--semi);
  --h2-line-height: 1.3em;
  --h2-letter-spacing: 0;
  --h2-text-transform: none;

  --h3-font: var(--font-family);
  --h3-font-size: 1.75rem;
  --h3-font-size--mobile: 1.5rem;
  --h3-font-weight: var(--font-weight--normal);
  --h3-line-height: 1.4em;
  --h3-letter-spacing: 0;
  --h3-text-transform: none;

  --h4-font: var(--font-family);
  --h4-font-size: 1.375rem;
  --h4-font-size--mobile: 1.125rem;
  --h4-font-weight: var(--font-weight--normal);
  --h4-line-height: 1.6em;
  --h4-letter-spacing: 0;
  --h4-text-transform: none;

  --h5-font: var(--font-family);
  --h5-font-size: 1.125rem;
  --h5-font-size--mobile: 1rem;
  --h5-font-weight: var(--font-weight--semi);
  --h5-line-height: 1.5em;
  --h5-letter-spacing: 0;
  --h5-text-transform: none;

  --h6-font: var(--font-family);
  --h6-font-size: 1rem;
  --h6-font-size--mobile: 0.875rem;
  --h6-font-weight: var(--font-weight--normal);
  --h6-line-height: 1.5em;
  --h6-letter-spacing: 0;
  --h6-text-transform: none;

  --large-font: var(--font-family);
  --large-font-size: 0.875rem;
  --large-font-size--mobile: 0.75rem;
  --large-font-weight: var(--font-weight--bold);
  --large-line-height: 1.5em;
  --large-letter-spacing: 0.14em;
  --large-text-transform: uppercase;

  --small-font: var(--font-family);
  --small-font-size: 0.75rem;
  --small-font-size--mobile: 0.625rem;
  --small-font-weight: var(--font-weight--normal);
  --small-line-height: 1.5em;
  --small-letter-spacing: 0;
  --small-text-transform: none;

  /* Utilities */
  --container-max-width: 1200px;

  --spacer--xs: 0.25rem;
  --spacer--sm: 0.5rem;
  --spacer: 1rem;
  --spacer--lg: 2rem;
  --spacer--xl: 3rem;
  --spacer--xxl: 4rem;
  --spacer--xxxl: 5rem;
  --spacer--xxxxl: 6rem;

  --border-radius--sm: 0.5rem;
  --border-radius: 1rem;
  --border-radius--lg: 2rem;
  --border-radius--circle: 50%;

  --button--padding: var(--spacer--sm) var(--spacer);
  --button--radius: var(--border-radius--lg);
  --button--background: var(--green--dark);
  --button--text: var(--white);

  --transition: all 0.3s ease-in-out;
  --transition--color: color 0.3s ease-in-out;
  --transition--mega-menu: all 1s ease-in-out;
  --button--transition:
    background-color 0.3s ease-in-out, color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}