:root {
  /*General variables*/
  --text-color: white;
  --app-bgcolor: #282c34;
  --link-fg-color: #98d0fd;

  /*Weight Selector (thin, large, etc)*/
  --weight-selector-radius: 8px;
  --weight-selector-water-tank-bgcolor: #453d55;
  --weight-selector-water-tank-bgcolor-water: #0288d1;
  --weight-selector-actual-water-tank-bgcolor-water: #02bed1;
  --weight-selector-handle-bgcolor: #c4c4c4;

  /*The repetition color*/
  --rep-fgcolor: #888296;
  --rep-selected-bgcolor: #654e92;
  --rep-bgcolor: var(--weight-selector-water-tank-bgcolor);
  --rep-radius: var(--weight-selector-radius);

  /*Top header */
  --app-title-fgcolor: var(--weight-selector-water-tank-bgcolor-water);
  --app-subtitle-fgcolor: var(--text-color);
  --app-title-font-large: 50px;
  --app-title-font-medium: 28px;
  --app-title-font-small: 14px;

  /*The blue button used everywhere*/
  --button-basic-fgcolor: var(--text-color);
  --button-basic-bgcolor: var(--weight-selector-water-tank-bgcolor-water);
  --button-font-size: 15px;

  /*List of exercise inside a workout*/
  --exercise-bgcolor: var(--weight-selector-water-tank-bgcolor);
  --exercise-fgcolor: var(--rep-fgcolor);

  /*Reps Tempo Canvas Component*/
  --overlay-bg: #5b5469;
  --overlay-font-extra-large: 84px;
  --overlay-font-large: 44px;
  --overlay-font-small: 30px;

  /*Components*/
  --component-font-size: 30px;
  --component-big-font-size: 50px;

  /*Z-index*/
  --movable-panel-curtains-zindex: 10;
  --water-zindex: 2;
  --water-actual-zindex: 3;
  --component-title-zindex: 5;
  --component-svg-zindex: 5;
  --component-handle-zindex: 10;
  --transition-zindex: 100;
  --transition-text-zindex: 110;
  --modal: 200;
}
