: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: #2B7EC1; /* bright blue */
  --content: #1A3A52; /* dark blue */
  --tertiary: #5B7C99; /* mid blue */
  --page: #E3F2FD; /* light blue */
  --drawer: #BBDEFB;
  --mainShadow: 0px 2px 3px rgba(43, 126, 193, 0.3);
  --mainShadowHover: 0px 10px 20px rgba(43, 126, 193, 0.2);
  --elevation: #F5FAFF; /* very light blue */
  --elevationHover: #FFFFFF; /* white */
  --introGradient: linear-gradient(180deg, #F0F8FF 0%, var(--page) 100%);
  --codeBG: #FFFFFF;
  --codeFont: #2B7EC1;
}
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%);
}