:root {
  /* general */
  
  --text: black;
  --text-disabled: gray;
  --outline: gray;
  --dark-outline: black;
  --background: lightblue;
  --bright-background: white;
  
  --input-background: white;
  
  --meter-background: rgb(233, 233, 237);
  --meter-low: rgb(0, 171, 96);
  --meter-half: rgb(255, 189, 79);
  --meter-full: rgb(226, 40, 80);
  
  --button-default: rgb(233, 233, 237);
  --button-hover: rgb(208, 208, 215);
  --button-active: rgb(177, 177, 185);
  
  --button-caution-default: rgb(250, 132, 132);
  --button-caution-hover: rgb(240, 103, 103);
  --button-caution-active: rgb(233, 85, 85);
  
  --button-safe-default: rgb(141, 252, 165);
  --button-safe-hover: rgb(94, 226, 123);
  --button-safe-active: rgb(64, 216, 97);
  
  --button-red-default: rgb(255, 187, 187);
  --button-red-hover: rgb(255, 136, 136);
  --button-red-active: rgb(255, 76, 76);
  
  /* body */
  
  --current-event-banner-background: rgb(255, 211, 129);
  --bottom-menu-background: orange;
  --scroll-buttons-outline: var(--dark-outline);
  
  --bottom-menu-button-default: rgb(255, 232, 190);
  --bottom-menu-button-hover: rgb(255, 218, 149);
  --bottom-menu-button-active: rgb(248, 201, 115);
  --bottom-menu-button-current-tab: rgb(252, 201, 107);
  
  /* events page */
  
  --events-background: blue;
  --events-fieldset-outline: var(--dark-outline);
  --events-legend-text: lightpink;
  
  --event-button-default: lightblue;
  --event-button-hover: rgb(125, 197, 219);
  --event-button-active: rgb(57, 171, 209);
  
  /* charts page */
  
  --week-button-hover: rgb(233, 233, 233);
  --week-button-active: rgb(214, 214, 214);
  
  --time-boundary-color: var(--text);
  
  --charts-stats-background: var(--bright-background);
  --charts-stats-outline: var(--dark-outline);
  
  /* data page */
  
  --data-backtemporal: red;
}