/* Variables used to brand app for various corporate clients */

html {
  --design-height: 2400px;
  --design-status-bar-height: 135px;
  --design-upper-navbar-height: 20px;

  --main-header-height: calc(var(--screenScalingFactor) * 150px);
  --main-subheader-height: calc(var(--screenScalingFactor) * 90px);
  --main-options-header-height: calc(var(--screenScalingFactor) * 120px);
  --mini-player-height: calc(var(--screenScalingFactor) * 165px);
  --lower-navbar-height: calc(var(--screenScalingFactor) * 216px);
  --lower-navbar-plus-mini-player-height: var(--lower-navbar-height);

}

html {
  --primary-color: #0D0D0D;
  --primary-color-rgb: 13, 13, 13; /* In rgb format so that it can be converted to rgba format for other purposes */
  --secondary-color: #53009a;
  --text-color: white;
  --secondary-text-color: #B28AD8;
  --text-item-title-color: #FFFFFF;
  --text-item-subtitle-color: rgba(255, 255, 255, 0.5);
  --accent-color: #946cd6;
  --button-color: #853BDB;
  --button-color2: #201F1F;
  --button-border-color: lightblue;
  --button-border-color2: #AAAAAA;
  --button-text-color: rgba(255, 255, 255, 0.75);
  --button-hover-color: #555;
  --input-border-color: white;
  --input-text-color: lightblue;
  --bullet-item-color: #53009a;
  --menu-color: #201f1f;
  --menu-border-color: #404040;
  --menu-text-color: #FFFFFF;
  --message-text-color: purple;
  --error-text-color: red;
  --popup-color: #201F1F;
  --popup-border-color: #404040;
  --popup-message-color: #FFFFFF;
  --popup-error-color: #FFFFFF;
  --player-progress-bar-background-color: #9768da;
  --timer-border-color: #53009a;
  --drag-and-drop-item-border-color: white;
  --selected-item-color: #271635;
  --toggle-switch-color: darkgray;
  --toggle-slider-color: white;
  --level-up-text-color: #2B65EC;
}
  
html.dark-mode {
  --primary-color: #0D0D0D;
  --primary-color-rgb: 13, 13, 13; /* In rgb format so that it can be converted to rgba format for other purposes */
  --secondary-color: #53009a;
  --text-color: white;
  --secondary-text-color: #B28AD8;
  --text-item-title-color: #FFFFFF;
  --text-item-subtitle-color: rgba(255, 255, 255, 0.5);
  --accent-color: #946cd6;
  --button-color: #853BDB;
  --button-color2: #201F1F;
  --button-border-color: lightblue;
  --button-border-color2: #AAAAAA;
  --button-text-color: rgba(255, 255, 255, 0.75);
  --button-hover-color: #555;
  --input-border-color: white;
  --input-text-color: lightblue;
  --bullet-item-color: #53009a;
  --menu-color: #201f1f;
  --menu-border-color: #404040;
  --menu-text-color: #FFFFFF;
  --message-text-color: purple;
  --error-text-color: red;
  --popup-color: #201F1F;
  --popup-border-color: #404040;
  --popup-message-color: #FFFFFF;
  --popup-error-color: #FFFFFF;
  --player-progress-bar-background-color: #9768da;
  --timer-border-color: #53009a;
  --drag-and-drop-item-border-color: white;
  --selected-item-color: #271635;
  --toggle-switch-color: darkgray;
  --toggle-slider-color: white;
  --level-up-text-color: #2B65EC;
}
  
html.lite-mode {
  --primary-color: #F2F2F2;
  --primary-color-rgb: 242, 242, 242;
  --secondary-color: #9A4700;
  --text-color: #000000;
  --secondary-text-color: #8AD8B2;
  --text-item-title-color: #000000;
  --text-item-subtitle-color: rgba(0, 0, 0, 0.5);
  --accent-color: #6CD694;
  --button-color: #DB853B;
  --button-color2: #DFDEDE;
  --button-border-color: #E6AD8A;
  --button-border-color2: #555555;
  --button-text-color: rgba(0, 0, 0, 0.75);
  --button-hover-color: #AAAAAA;
  --input-border-color: #000000;
  --input-text-color: #E6AD8A;
  --bullet-item-color: #ECB32B;
  --menu-color: #DFDEDE;
  --menu-border-color: #BFBFBF;
  --menu-text-color: #000000;
  --message-text-color: #008000;
  --error-text-color: #00FFFF;
  --popup-color: #EBA687;
  --popup-border-color: #008000;
  --popup-message-color: #008000;
  --popup-error-color: #FFFFFF;
  --player-progress-bar-background-color: #68DA97;
  --timer-border-color: #7D604D;
  --drag-and-drop-item-border-color: #000000;
  --selected-item-color: #163527;
  --toggle-switch-color: #565656;
  --toggle-slider-color: #000000;
  --level-up-text-color: #ECB32B;
}