:root {
  --rem:    12pt;       /* the base size of 1rem */
  --width:  96%;      /* container width */
  --navpos: absolute;   /* fixed | absolute */
  --ornament: "‹‹ ››";  /* ornament content after sections */

  --cfg:   #433;        /* foreground color for text  */
  --cbg:   #fff;        /* background color for html  */
  --cdark: #888;        /* dark gray for captions  */
  --cmed:  #d1d1d1;     /* medium gray for borders, table separator  */
  --clight:#f5f6f7;     /* light gray for different background (code) */
  --clink: #0073A3;        /* color to indicate clickable elements */
  --cemph: #EF2536;        /* the primary emphasis color of the theme */
}

html[data-theme='dark'] {
	/* foreground   | background color */
	--cfg:   #cecbc4; --cbg:    #252220;
	--cdark: #999;    --clight: #333;
	--cmed:  #566;
	--clink: #0073A3;
	--cemph: #EF2536;    --cemphbg: #0b91;
}

@media (prefers-color-scheme: dark) {
	html[data-theme='light'] {
		/* foreground   | background color */
		--cfg:   #cecbc4; --cbg:    #252220;
		--cdark: #999;    --clight: #333;
		--cmed:  #566;
		--clink: #1ad;
		--cemph: #0b9;    --cemphbg: #0b91;
	}	
}