/* MARK: - VARIABLES */
:root {
   --app-height: 100%; /* used for fixing mobile scrolling issues */

   --borderSize: 1px;
   --tarnsitionTime: 250ms;
   --radius: 3px;
   
   --padding: 5px;
   --halfPadding: calc(var(--padding) / 2);
   --twoTimesPadding: calc(var(--padding) * 2);
   --threeTimesPadding: calc(var(--padding) * 3);
   --fourTimesPadding: calc(var(--padding) * 4);
   --fiveTimesPadding: calc(var(--padding) * 5);
   --sixTimesPadding: calc(var(--padding) * 6);
   --sevenTimesPadding: calc(var(--padding) * 7);

   --black: rgb(0, 0, 0);
   --gray20: rgb(20,20,20);
   --darkGray: rgb(30, 30, 30);
   --gray30: rgb(30,30,30);
   --gray35: rgb(35,35,35);
   --gray40: rgb(40,40,40);
   --gray45: rgb(45, 45, 45);
   --gray50: rgb(50,50,50);
   --gray60: rgb(60, 60, 60);
   --gray100: rgb(100, 100, 100);
   --gray130: rgb(130,130,130);
   --mediumGray: var(--gray130);
   --gray150: rgb(150, 150, 150);
   --gray180: rgb(180,180,180);
   --gray200: rgb(200, 200, 200);
   --lightGray: rgb(225, 225, 225);
   --gray235: rgb(235, 235, 235);
   --gray240: rgb(240,240,240);
   --ultraLightGray: rgb(245, 245, 245);
   --gray250: rgb(250,250,250);
   --white: rgb(256, 256, 256);

   --transparentBlack: rgba(0, 0, 0, 0.25);
   --transparentLightGray: rgba(225, 225, 225, 0.8);
   --transparentUltraLightGray: rgba(245, 245, 245, 0.8);
   --transparentWhite: rgba(256, 256, 256, 0.8);

   --highlightBlue: rgba(235, 240, 245, 1);
   --highlightBlueHover: rgba(206, 219, 232, 1);
   
   --accent: var(--blue);
   --secondAccent: var(--gray180); 
   --thirdAccent: var(--orange);

   /* basic colors */
   --green: rgb(50, 200, 50);
   --blue: rgba(64, 170, 245, 1);
   --lightBlue: rgba(235, 240, 245, 1);
   --red: rgb(200, 50, 50);
   --yellow: rgb(247,203,1);
   --orange: rgb(238,136,0);
   --purple: rgb(191,90,242);
   --aqua: rgb(0,189,180);
   --pink: rgb(255,0,217);

   /* elements */
   --title: var(--orange);
   --background: var(--ultraLightGray);
   --borderColor: var(--gray235);
   --border-color: rgba(213, 151, 39, .21);
   --textColor: var(--gray60);
   --notificationText: var(--background);
   --shadow: var(--transparentBlack);
   --buttonText: var(--white);
   --buttonBG: var(--blue);
   
   --altEmphasis: var(--black);
   --altEmphasisBG: var(--secondAccent);
   --highlight: var(--highlightBlue);
   --progressBar: var(--green);
   
   --border: var(--borderSize) solid var(--borderColor);
   --box-shadow: 1px 1px var(--shadow);
}

:root .dark {
   /* basic colors */
   --orange: rgb(255,153,0);
   --white: var(--gray250);

   --background: var(--gray50);
   --borderColor: var(--gray45);
   --highlightBlue: rgb(51, 62, 71);
   --notificationText: var(--background);
   --textColor: var(--gray200);
/*   --buttonText: var(--background);*/
/*   --buttonBG: var(--textColor);*/
   
   --altEmphasis: var(--white);
   --altEmphasisBG: var(--gray20);
   --highlight: var(--highlightBlue);
   
   --border: var(--borderSize) solid var(--borderColor);
}

:root .red {
   /* basic colors */
   --orange: rgb(255,153,0);
   --white: var(--gray250);
   --red: rgba(161, 41, 41, 1.00);
   --darkRed: #8D2626;

   --background: var(--red);
   --borderColor: var(--darkRed);
   --highlightBlue: rgb(51, 62, 71);
   --notificationText: var(--background);
   --textColor: var(--gray250);
   --buttonText: var(--background);
   --buttonBG: var(--textColor);
   
   --altEmphasis: var(--white);
   --altEmphasisBG: var(--gray20);
   --highlight: var(--darkRed);
}