:root {

  --primary: hsl(274, 60%, 55%);
  --primary-light: hsl(274, 60%, 65%);
  --primary-lighter: hsl(274, 60%, 75%);
  --primary-dark: hsl(274, 60%, 45%);
  --primary-darker: hsl(274, 60%, 35%);

  --secondary: hsl(215, 26%, 18%);
  --secondary-light: hsl(215, 26%, 28%);
  --secondary-lighter: hsl(215, 26%, 38%);
  --secondary-dark: hsl(215, 26%, 8%);
  --secondary-darker: hsl(215, 26%, -2%);

  --dark: #222c3a;
  --dark-light: #35445a;
  --dark-lighter: #485d7a;
  --dark-dark: hsl(213, 27%, 8%);
  --dark-darker: #000;

  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);
  --off-white: hsl(0, 0%, 95%);
  --border: #cccccc;
  --success: #62b51f;
  --warning: #e4be4c;
  --error: #c82727;

  --body-font: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --title-font: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body-color: var(--white);
  --body-font-size: 62.5%;
  --body-line-height: 1.5;
  --body-bg: var(--secondary);

  --link-color: var(--primary);
  --link-color-hover: var(--primary-dark);

  --input-bg: var(--white);
  --input-border: var(--border);
  --input-focus: var(--off-white);

  --primary-rgb: 147, 69, 209;
  --secondary-rgb: 24, 25, 27;
  --nav-bg: 92, 14, 154;

}