:root {
  /* Color Variables */
  --color-101: #222222;
  --color-102: #303030;
  --color-103: #727272;

  --color-104: #F5B451;
  --color-105: #DADADA;
  --color-106: #FFFFFF;
  --color-107: #FCEDD8;

  --color-108: #00000029;

  --color-201: #F97316;
  --color-202: #F973163A;

  --color-203: #EF4444;
  --color-204: #EF44443A;

  --color-205: #22C55E;
  --color-206: #22C55E3A;

  --success-color: var(--color-205);
  --error-color: var(--color-203);
  --warning-color: var(--color-201);

  --success-color-light: var(--color-206);
  --error-color-light: var(--color-204);
  --warning-color-light: var(--color-202);
}

:root {
  --background-primary: var(--color-106);
  --background-secondary: var(--color-106);
  --text-primary: var(--color-101);
  --backdrop-color: rgba(181, 181, 181, 0.8);
  --bg-skeleton: var(--color-105);
  --accent-background-secondary: var(--color-107);
  --bg-primary-progress: var(--color-105);
  --border-color: var(--color-105);

  /* Common */
  --accent-background-primary: var(--color-107);
  --text-secondary: var(--color-101);
  --accent-color: var(--color-104);
  --primary-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
  --activity-waiting-color: var(--color-103);
  --date-picker-date-bg: var(--color-108);
  --tooltip-text-color: var(--color-105);
  --tooltip-bg: var(--color-102);
}

html[data-theme="dark"] {
  --background-primary: var(--color-101);
  --background-secondary: var(--color-102);
  --text-primary: var(--color-106);
  --backdrop-color: rgba(10, 10, 10, 0.9);
  --bg-skeleton: var(--color-102);
  --border-color: var(--color-103);
  --accent-background-secondary: var(--color-102);
  --bg-primary-progress: var(--color-102);
  --tooltip-text-color: var(--color-102);
  --tooltip-bg: var(--color-105);
}