:root {
  /* BACKGROUND COLORS */
  --background-color-light: var(--light);
  --background-color-dark: var(--dark);
  /* BASE TEXT */
  --base-text-size: 1rem;
  /* 16px */
  --base-text-weight: 400;
  --base-text-lineheight: 1.5;
  --text-color-dark: var(--dark);
  --text-color-light: var(--light);
  /* ANCHOR TEXT */
  --anchor-color: var(--primary);
  --anchor-color-hover: var(--secondary);
  /* SHADOWS */
  --box-shadow: 3.1px 3.4px 2.7px rgba(0, 0, 0, 0.016),
      7.9px 8.7px 6.9px rgba(0, 0, 0, 0.022),
      16.1px 17.7px 14.2px rgba(0, 0, 0, 0.028),
      33.2px 36.5px 29.2px rgba(0, 0, 0, 0.034),
      91px 100px 80px rgba(0, 0, 0, 0.05);
  /* TRANSITIONS */
  --transition-3s: 0.3s;
  --transition-ease: ease;
  --transition-color: color;
  --transition: 0.3s ease-in-out;
  /* HEADINGS */
  --h1-text-size: 2.5rem;
  --h1-text-weight: 400;
  --h1-text-lineheight: 1;
  --h1-text-color: var(--text);
  --h2-text-size: 2rem;
  --h2-text-weight: 400;
  --h2-text-lineheight: 1.25;
  --h2-text-color: var(--text);
  --h3-text-size: 1.75rem;
  --h3-text-weight: 400;
  --h3-text-lineheight: 1.25;
  --h3-text-color: var(--text);
  --h4-text-size: 1.5rem;
  --h4-text-weight: 600;
  --h4-text-lineheight: 1.25;
  --h4-text-color: var(--text);
  --h5-text-size: 1.2rem;
  --h5-text-weight: 600;
  --h5-text-lineheight: 1.5;
  --h5-text-color: var(--text);
  --h6-text-size: 1rem;
  --h6-text-weight: 600;
  --h6-text-lineheight: 1.5;
  --h6-text-color: var(--text);
  /* VIEWPORT SIZES */
  --layout-max-width: 130rem;
  --layout-content-width: 36rem;
  /* Default Page Padding in REM */
  /* Default Page Padding in REM */
  --page-padding-max: 2rem;
  --page-padding-min: 1.5rem;
  /* Default Section Spacing in REM */
  --section-spacing-top: 2rem;
  --section-spacing-bottom: 2rem;
  --gap-xs: clamp(0.5rem, 2vw, 1rem);
  --gap-s: clamp(1rem, 5vw, 2rem);
  --gap-m: clamp(2rem, 7vw, 3rem);
  --gap-l: clamp(3rem, 7vw, 6rem);
  --gap-xl: clamp(5rem, 15vw, 8rem);
  --border-radius: 3.5px;
}