:root {
  /* tokens */
  --light:#fff;
  --light--t90:#ffffffd8;
  --light--t80:#fffc;
  --light--t60:#fff9;
  --light--t40:#fff6;
  --light--t20:#fff3;

  --grey-h:180;

  --grey--8:hsl(var(--grey-h) 3% 8%);
  --grey--8--t20:hsl(var(--grey-h) 3% 8% / .2);
  --grey--8--t80:hsl(var(--grey-h) 3% 8% / .8);
  
  --grey--16:hsl(var(--grey-h) 3% 24%);
  --grey--16--t80:hsl(var(--grey-h) 3% 16% / .8);
  --grey--16--t20:hsl(var(--grey-h) 3% 16% / .2);
  
  --grey--24:hsl(var(--grey-h) 3% 24%);
  --grey--24--t80:hsl(var(--grey-h) 3% 24% / .8);
  --grey--24--t20:hsl(var(--grey-h) 3% 24% / .2);

  --grey--32:hsl(var(--grey-h) 3% 32%);
  --grey--32--t90:hsl(var(--grey-h) 3% 32% / .9);
  --grey--32--t80:hsl(var(--grey-h) 3% 32% / .8);
  --grey--32--t60:hsl(var(--grey-h) 3% 32% / .6);
  --grey--32--t40:hsl(var(--grey-h) 3% 32% / .4);
  --grey--32--t20:hsl(var(--grey-h) 3% 32% / .2);
  --grey--32--t10:hsl(var(--grey-h) 3% 32% / .1);

  --grey--40:hsl(var(--grey-h) 3% 40%);
  
  --grey--84--t20:hsl(var(--grey-h) 3% 84% / .2);

  --yellow:#FFF2A0;
  --orange:#ffdd81;
  --pink:#ffc5c5;
  --green:#c3e3c4;
  --blue:#cee5f8;
  --purple:#d9cfe7;
  --turquoise:#a8dcdb;

  --yellow--br:#FFF021;
  --orange--br:#Fdbf6f;
  --pink--br:#f7959a;
  --green--br:#95cf9b;
  --blue--br:#a2d9f1;
  --purple--br:#beacd3;
  --turquoise--br:#6ec6c0;

  --yellow--d:#b2a23f;
  --orange--d:#b09467;
  --pink--d:#a37775;
  --green--d:#749172;
  --blue--d:#5c7a96;
  --purple--d:#78739c;
  --turquoise--d:#5b8388;

  --blue--m:#007eb6;
  --yellow-l:#fffdee;



  /* light theme */
  color-scheme:light;
  accent-color:var(--accent-color);


  --bg-root:var(--light);
  --clr-root:var(--grey--24);

  --bg-selection:var(--blue--br);
  --clr-selection:var(--grey--24);

  --clr-link:var(--blue--m);
  --outline-link:var(--clr-link);

  --clr-link-hero:var(--clr-link);
  --outline-link-hero:var(--clr-link);

  --clr-nav:var(--clr-root);
  --clr-nav--hover:var(--clr-link);
  --bg-nav:var(--bg-root);
  --bg-nav--t:var(--light--t90);

  --bg-aside:var(--light--t60);
  --bg-aside__fog:var(--light--t20);
  --line-aside__fog:var(--grey--84--t20);

  --clr-button--tab:var(--clr-root);
  --brdr-button--tab:var(--clr-root);
  --bg-button--tab-selected:var(--clr-root);
  --clr-button--tab-selected:var(--bg-root);

  --bg-h1:var(--yellow--br);
  --clr-h1:var(--grey--24);
  --bg-h1__strong:var(--clr-root);
  --clr-h1__strong:var(--light);
  --bg-h1__handle:var(--light);
  --brdr-h1__handle:var(--grey--24);
  --bg-p--header:var(--grey--84--t20);

  --bg-nav--local:var(--bg-root);
  --bg-nav--local--t:var(--bg-nav--t);
  --bg-nav--local__progress:var(--yellow);

  --clr-button--square:var(--clr-root);
  --bg-button-square:var(--bg-root);

  --accent-color:var(--clr-link);
  
  /* content */
  --bg-section--charley:var(--light);
  --bg-strong:var(--yellow);

  --bg--student:var(--yellow--br);
  --clr--student:var(--grey--8);

  --bg--h3:var(--yellow);
}



@media only screen {
  :root[data-color-scheme="dark"] {
    /* dark theme */
    color-scheme:dark;

    --bg-root:var(--grey--32);
    --clr-root:var(--light);

    --clr-link:var(--yellow);

    --bg-nav--t:var(--grey--32--t90);

    --bg-aside:var(--grey--32--t80);
    --bg-aside__fog:var(--grey--32--t20);
    --line-aside__fog:var(--grey--24--t20);

    --clr-h1:var(--grey--8);
    --clr-h1__strong:var(--grey--8);
    --brdr-h1__handle:var(--grey--8);
    --bg-p--header:var(--grey--24--t20);

    --bg-nav--local__progress:var(--yellow--d);

    /* content */
    --bg-section--charley:var(--yellow-l);

    --bg-strong:var(--yellow--d);

    --bg--h3:var(--yellow--d);
  }
}