:root {
  --primary: hsl(338, 83%, 48%);
  --primary_1: hsl(338, 83%, 62%);
  --primary_2: hsl(338, 84%, 82%);

  --secondary: hsl(223, 89%, 42%);
  --secondary_1: hsl(222, 90%, 57%);
  --secondary_2: hsl(223, 90%, 80%);

  --accent-2: hsl(217, 23%, 38%);
  --accent-2_1: hsl(218, 23%, 54%);
  --accent-2_2: hsl(219, 23%, 78%);

  --accent-3: hsl(241, 40%, 35%);
  --accent-3_1: hsl(241, 40%, 65%);
  --accent-3_2: hsl(241, 57%, 79%);

  --background: hsl(0, 0%, 100%);
  --background_1: hsla(0, 0%, 100%, 0.75);
  --background_2: hsla(0, 0%, 100%, 0.3);

  --cards: hsl(222.9, 100%, 98.6%);
  --cards_1: hsla(223, 100%, 99%, 0.75);
  --cards_2: hsla(223, 100%, 99%, 0.3);

  --borders: hsl(217, 30%, 86%);
  --borders_1: hsl(216, 29%, 90%);
  --borders_2: hsl(218, 41%, 95%);

  --headings: hsl(224, 48%, 15%);
  --headings_1: hsl(224, 16%, 36%);
  --headings_2: hsla(225, 11%, 73%);

  --text: hsl(223, 52%, 9%);
  --text_1: hsl(225, 10%, 36%);
  --text_2: hsl(225, 10%, 78%);

  --link-text: hsl(223, 89%, 42%);
  --link-text_1: hsl(222, 90%, 57%);
  --link-text_2: hsl(223, 90%, 80%);

  --contrast-text: hsl(0, 0%, 100%); /* Kepler Twilight --text */
  --contrast-text_1: hsl(224, 8%, 66%); /* Kepler Twilight --text_1 */
  --contrast-text_2: hsl(223, 12%, 40%); /* Kepler Twilight --text_2 */

  --validation: hsl(0, 85.6%, 64.5%);
  --validation_1: hsl(0, 85.5%, 72.9%);
  --validation_2: hsl(0, 86.9%, 88%);

  /* TODO: remove default once fully replaced by disabled */
  --default: hsl(222, 10%, 65%);
  --disabled: hsl(222, 10%, 65%);
  --default_1: hsl(224, 10%, 79%);
  --disabled_1: hsl(224, 10%, 79%);
  --default_2: hsl(225, 11%, 93%);
  --disabled_2: hsl(225, 11%, 93%);

  --r: hsl(0, 85.6%, 64.5%);
  --r_1: hsl(0, 85.5%, 72.9%);
  --r_2: hsl(0, 86.9%, 88%);

  --a: hsl(36, 100%, 58%);
  --a_1: hsl(36, 100%, 69%);
  --a_2: hsl(35, 100%, 86%);

  --g: hsl(128, 45%, 50%);
  --g_1: hsl(127, 45%, 62%);
  --g_2: hsl(127, 44%, 82%);

  --backdrop: hsla(0, 0%, 0%, 0.3);
}

:root {
  --light: hsl(197, 67%, 79%);
  --light_1: hsl(198, 68%, 84%);
  --light_2: hsl(196, 65%, 91%);

  --baby-blue: hsl(208, 86%, 65%);
  --baby-blue_1: hsl(209, 85%, 72%);
  --baby-blue_2: hsl(209, 86%, 88%);

  --blue: hsl(237, 100%, 72%);
  --blue_1: hsl(238, 100%, 80%);
  --blue_2: hsl(237, 100%, 91%);

  --lilac: hsl(245, 80%, 82%);
  --lilac_1: hsl(246, 79%, 86%);
  --lilac_2: hsl(245, 80%, 93%);

  --grape: hsl(266, 85%, 64%);
  --grape_1: hsl(265, 85%, 72%);
  --grape_2: hsl(266, 86%, 88%);

  --pink: hsl(331, 86%, 65%);
  --pink_1: hsl(331, 85%, 72%);
  --pink_2: hsl(330, 86%, 88%);

  --bright-pink: hsl(338, 83%, 48%);
  --bright-pink_1: hsl(338, 83%, 62%);
  --bright-pink_2: hsl(338, 84%, 82%);

  --berry: hsl(0, 85%, 64%);
  --berry_1: hsl(0, 85%, 72%);
  --berry_2: hsl(0, 86%, 88%);

  --orange: hsl(22, 85%, 64%);
  --orange_1: hsl(21, 85%, 72%);
  --orange_2: hsl(21, 86%, 88%);

  --honey: hsl(36, 100%, 58%);
  --honey_1: hsl(36, 100%, 69%);
  --honey_2: hsl(35, 100%, 86%);

  --lime: hsl(85, 54%, 51%);
  --lime_1: hsl(85, 54%, 63%);
  --lime_2: hsl(84, 54%, 82%);

  --apple: hsl(128, 45%, 50%);
  --apple_1: hsl(127, 45%, 62%);
  --apple_2: hsl(127, 44%, 82%);

  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);

  --yellow: hsl(47, 100%, 58%);
  --yellow_1: hsl(47, 100%, 69%);
  --yellow_2: hsl(47, 100%, 86%);

  --grc_1: var(--light);
  --grc_2: var(--baby-blue);
  --grc_3: var(--blue);
  --grc_4: var(--lilac);
  --grc_5: var(--grape);
  --grc_6: var(--pink);
  --grc_7: var(--bright-pink);
  --grc_8: var(--berry);
  --grc_9: var(--orange);
  --grc_10: var(--honey);
  --grc_11: var(--lime);
  --grc_12: var(--apple);
  --grc_13: var(--white);
  --grc_14: var(--black);
  --grc_15: var(--yellow);
}

:root {
  --heading: "Prompt", sans-serif;
  --body: "Open Sans", sans-serif;

  font-size: 14px; /* same as p and .body */
}