:root {
  --primary: #171717;
  --primary-tint-1: #303030;
  --primary-tint-2: #4a4a4a;
  --primary-tint-3: #636363;
  --secondary: #f5f5f5;
  --secondary-tint-1: #fff;
  --secondary-tint-2: #fff;
  --secondary-tint-3: #fff;
  --tertiary: #ffcd00; 
  --gray-1: #000;
  --gray-2: #0a0a0a;
  --gray-3: #636363;
  --gray-light: #e4edef;
  --blog-bg-color: #b7b7b7;
  --comment-name: #000;
  --social-links-blog-post: #1e2ea9;
  --cat-badge-bg: #3c3d38;
  --front-dark-bg: #1a1a1a;
  --front-light-bg: #e4edef;
  --promo: #27ae60;
  --isPaid: #10ac84;
  --isAwait: #576574;
  --isCancelled: #ee5253;
  --circleIsCompleted: #27ae60;
  --circleIsUncompleted: #b7b7b7;
  --product-description-bg: #FAF8F5;
  --product-text: #303030;
  --opinion-external-link: #838d95;
  --social-login-color: #fff;
}

/* Classes */

.color-primary {
  color: var(--primary);
}

.bg-color-primary {
  background-color: var(--primary);
}

.color-primary-tint-1 {
  color: var(--primary-tint-1);
}

.bg-color-primary-tint-1 {
  background-color: var(--primary-tint-1);
}

.color-primary-tint-2 {
  color: var(--primary-tint-2);
}

.bg-color-primary-tint-2 {
  background-color: var(--primary-tint-2);
}

.color-primary-tint-3 {
  color: var(--primary-tint-3);
}

.bg-color-primary-tint-3 {
  background-color: var(--primary-tint-3);
}

.color-secondary {
  color: var(--secondary);
}

.bg-color-secondary {
  background-color: var(--secondary);
}

.color-secondary-tint-2 {
  color: var(--secondary-tint-2);
}

.bg-color-secondary-tint-2 {
  background-color: var(--secondary-tint-2);
}

.color-secondary-tint-3 {
  color: var(--secondary-tint-3);
}

.bg-color-secondary-tint-3 {
  background-color: var(--secondary-tint-3);
}

.color-tertiary {
  color: var(--tertiary);
}

.bg-color-tertiary {
  background-color: var(--tertiary);
}

.color-gray-1 {
  color: var(--gray-1);
}

.bg-color-gray-1 {
  background-color: var(--gray-1);
}

.color-gray-2 {
  color: var(--gray-2);
}

.bg-color-gray-2 {
  background-color: var(--gray-2);
}

.color-gray-3 {
  color: var(--gray-3);
}

.bg-color-gray-3 {
  background-color: var(--gray-3);
}

.color-gray-light {
  color: var(--gray-light);
}

.bg-color-gray-light {
  background-color: var(--gray-light);
}

.front-dark-bg {
  background-color: var(--front-dark-bg);
}

.front-light-bg {
  background-color: var(--front-light-bg);
}

.color-promo {
  color: var(--promo);
}

.bg-promo {
  color: var(--promo);
}