:root {
   --primary-color: #0093e9;
   --secondary-color: #80d0c7;
   --good-color: #80d094;
   --warning-color: #d0cf80;
   --error-color: #d08080;
   
   --light-text-color: #575757;
   --dark-text-color: #ffffff;
   --light-normal-text-color: #0a244d;
   --dark-normal-text-color: #cccccc;
   --light-light-text-color: rgb(140, 171, 217);
   --dark-light-text-color: rgb(76, 89, 103);
   --light-richer-text-color: rgb(60, 74, 88);
   --dark-richer-text-color: rgb(148, 184, 219);
   --highlight-text-color: hsl(25, 70%, 45%);

   --light-background-color: #f3f4f6;
   --dark-background-color: #26242E;
   --light-sidebar-background-color: #f3f4f6;
   --dark-sidebar-background-color: #343a40;

   --light-item-background-color: #fff;
   --dark-item-background-color: #34323D;
   --light-button-background-color: #fff;
   --dark-button-background-color: #34323D;
   --light-control-group-background: rgba(10, 36, 77, .06);
   --dark-control-group-background: rgba(0, 0, 0, .16);
   --light-control-group-ring: rgba(10, 36, 77, .09);
   --dark-control-group-ring: rgba(255, 255, 255, .09);
   --control-active-background: #006fc2;
   --control-active-ring: rgba(255, 255, 255, .72);
   
   --light-modal-background-color: #fafafa;
   --dark-modal-background-color: #3b3b48;
   --icon-background-image: linear-gradient(160deg, var(--primary-color) 0%, var(--secondary-color) 100%);
   --control-background-image: var(--icon-background-image);
   --control-hover-background: var(--primary-color);
   --accent-foreground-color: var(--item-background-color);
   --data-value-color: var(--text-color);
}

[data-theme="light"] {
   --text-color: var(--light-text-color);
   --normal-text-color: var(--light-normal-text-color);
   --light-text-color: var(--light-light-text-color);
   --richer-text-color: var(--light-richer-text-color);
   --background-color: var(--light-background-color);
   --sidebar-background-color-color: var(--light-sidebar-background-color);
   --item-background-color-color: var(--light-item-background-color);
   --button-background-color: var(--light-button-background-color);
   --control-group-background: var(--light-control-group-background);
   --control-group-ring: var(--light-control-group-ring);
   --modal-background-color-color: var(--light-modal-background-color);
}

[data-theme="dark"] {
   --text-color: var(--dark-text-color);
   --normal-text-color: var(--dark-normal-text-color);
   --light-text-color: var(--dark-light-text-color);
   --richer-text-color: var(--dark-richer-text-color);
   --background-color: var(--dark-background-color);
   --sidebar-background-color-color: var(--dark-sidebar-background-color);
   --item-background-color-color: var(--dark-item-background-color);
   --button-background-color: var(--dark-button-background-color);
   --control-group-background: var(--dark-control-group-background);
   --control-group-ring: var(--dark-control-group-ring);
   --modal-background-color-color: var(--dark-modal-background-color);
   --icon-background-image: linear-gradient(160deg, #0088ca 0%, #36a4c1 100%);
   --control-background-image: linear-gradient(160deg, #0088d0 0%, #4db4c8 100%);
   --control-hover-background: #007fc4;
   --accent-foreground-color: #07131b;
   --data-value-color: #e3e6e8;
}