:root {
  --titleFont: 'Merriweather', serif;
  --bodyFont: 'Noto Sans', sans-serif;
  --annotationFont: 'Merriweather Sans', sans-serif;
  --gray: #999999;
  --grayDark: #2E343B;
  --white: #FFFFFF;
  --black: #000000;
  --buttonDark: #404685;
  --shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  --shadowHover: 0px 1px 2px rgba(0, 0, 0, 0.5);
  --fastFade: 0.1s ease;
  --slowFade: 0.3s ease;
  --radius: 5px;
}

body.light{
  --accent: 		#554562; /* blush	#dda7b9*/ /* magenta #C81937*/
  --content: 	#547372; /*gray-blue*/ /* dark blue #1A2849 */
  --tertiary: #876880; /* teal */ /* mid blue #696E84 */
  --page: 		#dec2cb; /* purple */ /* light pink #FBE0DE*/
  --drawer: #F4BAB7;
  --mainShadow: 0px 2px 3px rgba(137, 21, 35, 0.3);
  --mainShadowHover: 0px 10px 20px rgba(137, 21, 35, 0.2);
  --elevation: #FEF9F8; /* very light pink */
  --elevationHover: #FFFFFF; /* white */
  --introGradient: linear-gradient(180deg, #FDF0EF 0%, var(--page) 100%);
  --codeBG: #FFFFFF;
  --codeFont: #C81937;
}

body.dark{
  --accent: #FFCAD3; /* light pink */ /*#FFF9F9;*/ /* cream */
  --content: #FFF9F9; /* cream */
  --tertiary: #C4C4CA; /* light gray */
  --page: #252D3E; /* dark blue */
  --drawer: #1B2334;
  --mainShadow: 0px 2px 3px rgba(14, 11, 33, 0.3);
  --mainShadowHover: 0px 10px 20px rgba(14, 11, 33, 0.3);
  --elevation: #3D465C; /* light blue */
  --elevationHover: #4A5570; /* lighter blue */
  --introGradient: linear-gradient(180deg, #3B4251 0%, var(--page) 100%);
  --codeBG: rgba(37, 45, 62, 0.4);
  --codeFont: #82B4E3;
}

body{
  --focus: 0 0 3px 1px var(--accent); /* accessible glow */
  --drawerGradient: linear-gradient(270deg, var(--drawer) 0%, rgba(122,122,122,0) 2%, rgba(122,122,122,0) 98%, var(--drawer) 100%);
}