:root {
  --primary-blue: #4e79a3;
  --secondary-blue: #7599bd;
  --tertiary-blue: #9fb8d1;

  --primary-green: #5fa34e;
  --secondary-green: #84bd75;
  --tertiary-green: #a9d19f;

  --primary-text: #40474e;
  --secondary-text: #5c6670;
  --tertiary-text: #788591;

  --accent-1a: #a3844e;
  --accent-1b: #bda375;
  --accent-1c: #d1be9f;

  --accent-2a: #a34e91;
  --accent-2b: #bd75ad;
  --accent-2c: #d19fc6;

  --alert-1a: #a3514e;
  --alert-1b: #bd7875;
  --alert-1c: #d1a19f;

  --page-width: 1200px;
  --border-radius: 21px;

  --card-padding: 12px;
  --card-inner-radius: calc(var(--border-radius) - var(--card-padding));

  --blue-filter: brightness(0) saturate(100%) invert(47%) sepia(43%)
    saturate(485%) hue-rotate(168deg) brightness(86%) contrast(90%);

  --yellow-filter: brightness(0) saturate(100%) invert(48%) sepia(62%)
    saturate(282%) hue-rotate(359deg) brightness(97%) contrast(98%);

  --red-filter: brightness(0) saturate(100%) invert(32%) sepia(8%)
    saturate(3912%) hue-rotate(314deg) brightness(108%) contrast(77%);

  --pink-filter: brightness(0) saturate(100%) invert(38%) sepia(28%)
    saturate(1186%) hue-rotate(261deg) brightness(93%) contrast(83%);

  --green-filter: brightness(0) saturate(100%) invert(58%) sepia(20%)
    saturate(1129%) hue-rotate(62deg) brightness(95%) contrast(84%);
}

.bg-blue-1 {
  background-color: var(--primary-blue);
  color: #fff;
}

.bg-blue-2 {
  background-color: var(--secondary-blue);
  color: #fff;
}

.bg-blue-3 {
  background-color: var(--tertiary-blue);
  color: #000;
}

.bg-green-1 {
  background-color: var(--primary-green);
  color: #fff;
}

.bg-green-2 {
  background-color: var(--secondary-green);
  color: #fff;
}

.bg-green-3 {
  background-color: var(--tertiary-green);
  color: #000;
}

.bg-acc-1a {
  background-color: var(--accent-1a);
  color: #fff;
}

.bg-acc-1b {
  background-color: var(--accent-1b);
  color: #fff;
}

.bg-acc-1c {
  background-color: var(--accent-1c);
  color: #000;
}

.bg-acc-2a {
  background-color: var(--accent-2a);
  color: #fff;
}

.bg-acc-2b {
  background-color: var(--accent-2b);
  color: #fff;
}

.bg-acc-2c {
  background-color: var(--accent-2c);
  color: #000;
}

.bg-alert-1a {
  background-color: var(--alert-1a);
  color: #fff;
}

.bg-alert-1b {
  background-color: var(--alert-1b);
  color: #fff;
}

.bg-alert-1c {
  background-color: var(--alert-1c);
  color: #000;
}

.bg-text-1 {
  background-color: var(--secondary-text);
  color: #fff;
}