:root {
  --Base-Font-Size:16px;
  
  /* layout options */
  --Screen-Gaps:3.5rem;
  --Container-Width:clamp(20vw,450px,85vw);
  --Screen-Corner-Gaps:0.69rem;

  /* body font */
  --Body-Font-Family:"Geist";
  --Body-Font-Weight:normal;
  --Body-Font-Size:0.9rem;
  --Body-Letter-Spacing:0.01em;
  --Body-Word-Spacing:0px;
  --Body-Line-Height:1.875;
  --Body-Text-Color:var(--Text);

  /* icons */
  --Icons-Size:calc(var(--Body-Font-Size) * 1.25);

  /* bold */
  --Bold-Font-Weight:600;
  --Bold-Text-Color:var(--Text-Special);

  /* headings */
  --Heading-Font-Family:"Geist";
  --Heading-Font-Weight:600;
  --Heading-Font-Size:calc(var(--Body-Font-Size) * 1.420);
  --Heading-Text-Color:var(--Text-Special);

  --Subheading-Font-Size:calc(var(--Body-Font-Size) + 1px);

  /* small caps */
  --Caps-Font-Family:"Geist";
  --Caps-Font-Weight:500;
  --Caps-Font-Size:calc(var(--Body-Font-Size) * 0.85);
  --Caps-Letter-Spacing:0.035rem;
  --Caps-Line-Height:var(--Body-Line-Height);

  /* links */
  --Links-Underline-Gap:0.325em;
  --Links-Underline-Size:1px;

  /* buttons */
  --Buttons-Font-Weight:500;

  /* blockquotes */
  --Blockquote-Border-Gap-Left:1.5rem;
  --Blockquote-Border-Gap-Right:1.35rem;
  --Blockquote-Nested-Border-Gap-Left:0.69rem;
  --Blockquote-Border-Size:3px;
  --Blockquote-Border-Rounded-Corners:3px;
  --Blockquote-Border-Color:rgb(from var(--Borders-Alt) r g b / 69%);

  /* code */
  --Code-Font-Family:"Geist Mono";
  --Code-Font-Weight:normal;
  --Code-Font-Size:calc(var(--Body-Font-Size) * 0.925);
  --Code-Letter-Spacing:0px;
  --Code-Word-Spacing:0px;
  --Code-Line-Height:var(--Body-Line-Height);
  --Code-Block-Padding-X:1rem;
  --Code-Block-Padding-Y:1rem;
  --Code-Block-Rounded-Corners:var(--Rounded-Corners-L);
  --Code-Block-BG:var(--Secondary-BG);
  --Code-Block-Text-Color:var(--Secondary-FG);

  /* popups */
  --Popup-BG-Color:#000;
  --Popup-BG-Color-Transparency:70%;
  --Popup-BG-Blur:5px;
  --Popup-Fade-Speed:420ms;
  --Popup-Z-Index:9;

  /* scrollbars */
  --Scrollbar-Thumb-Color:var(--Borders-Alt);
  --Scrollbar-Track-Color:var(--Borders);
  --Scrollbar-BG:var(--Background-Color);

  --Scrollbar-Size:1px;
  --Scrollbar-Padding:9px;

  /* light/dark toggle stuff */
  --Loading-Overlay-Color:#1f212c; /* overlay that covers all content before DOM is loaded */
  --Loading-Overlay-FadeOut-Delay:0.5s; /* delay before <body> gets the .fade-in class */
  --Loading-Overlay-FadeOut-Speed:0.69s;

  --Color-Scheme-Dark-To-Light-Overlay-Color:#1f212c; /* overlay color (dark -> light) */
  --Color-Scheme-Light-To-Dark-Overlay-Color:#fcfcfc; /* overlay color (light -> dark) */
  --Color-Scheme-Switching-Fade-Speed:0.69s;

}/* end root */

/* hidden vars */
:root {
  --Body-Font:var(--Body-Font-Weight,normal) var(--Body-Font-Size,0.9rem)/var(--Body-Line-Height,1.5) var(--Body-Font-Family), sans-serif;
  --Shadows:var(--Shadows-Offset-X) var(--Shadows-Offset-Y) var(--Shadows-Offset-Blur) var(--Shadows-Offset-Spread) rgb(from var(--Shadows-Color) r g b / var(--Shadows-Strength,100%));

  --Body-LH-V-Gap:calc(((var(--Body-Font-Size) * var(--Body-Line-Height)) - var(--Body-Font-Size)) / 2);
  --Subheading-LH-V-Gap:calc(((var(--Subheading-Font-Size) * var(--Body-Line-Height)) - var(--Subheading-Font-Size)) / 2);
  --Heading-LH-V-Gap:calc(((var(--Heading-Font-Size) * var(--Body-Line-Height)) - var(--Heading-Font-Size)) / 2);
  --Caps-LH-V-Gap:calc(((var(--Caps-Font-Size) * var(--Caps-Line-Height)) - var(--Caps-Font-Size)) / 2);
  --Code-Block-LH-V-Gap:calc(((var(--Code-Font-Size) * var(--Code-Line-Height)) - var(--Code-Font-Size)) / 2);
}/* end hidden root */