:root {
  --bg-color: hsl(240, 21%, 15%); /* base */
  --text-color: hsl(226, 64%, 88%); /* text */
  --color-primary: hsl(267, 84%, 81%); /* mauve */
  --outline-color: hsl(316, 72%, 86%); /* pink */
  --button-bg: linear-gradient(to right, hsl(240, 21%, 20%), hsl(240, 21%, 25%));
  --button-bg-box-shadow-color: rgba(0, 0, 0, 0.4);

  --button-bg-primary: linear-gradient(
    to right,
    hsl(267, 84%, 81%),
    hsl(267, 84%, 70%)
  );
  --button-bg-primary-box-shadow-color: hsla(267, 84%, 81%, 0.4);

  --button-bg-secondary: linear-gradient(
    to right,
    hsl(217, 92%, 76%), /* blue */
    hsl(217, 92%, 65%)
  );
  --button-bg-secondary-box-shadow-color: hsla(217, 92%, 76%, 0.4);

  --button-action-shadow-color: hsla(240, 30%, 10%, 0.3);

  --underline-color: hsl(240, 30%, 60%);
  --secondary-text-color: hsl(240, 15%, 65%);

  --send-icon-hover-color: hsl(217, 92%, 76%);
  --send-spinner-icon-color: hsl(240, 10%, 60%);

  --copy-icon-color: hsl(41, 86%, 83%); /* yellow */
  --copy-icon-bg-color: hsl(240, 21%, 20%);
  --copy-icon-shadow-color: hsla(240, 30%, 10%, 0.3);

  --focus-outline-color: hsla(267, 84%, 81%, 0.5);

  --checkbox-bg-color: hsl(217, 92%, 76%);

  --input-shadow-color: hsla(240, 30%, 10%, 0.3);
  --input-hover-shadow-color: hsla(240, 30%, 10%, 0.5);
  --input-label-color: hsl(226, 64%, 88%);

  --table-shadow-color: hsla(240, 30%, 10%, 0.4);
  --table-bg-color: hsl(240, 21%, 18%);
  --table-tr-border-color: hsl(240, 21%, 22%);
  --table-tr-hover-bg-color: hsl(240, 21%, 22%);
  --table-head-tr-border-color: hsl(240, 21%, 25%);
  --table-status-gray-bg-color: hsl(240, 21%, 18%);
}

a.button.action.stats,
button.action.stats {
  background: hsl(240, 21%, 22%);
}

a.button.action.stats svg,
button.action.stats svg {
  stroke-width: 2.5;
  stroke: hsl(267, 84%, 81%); /* mauve */
}