html {
  color-scheme: light dark;
  --hsl-h: 188.9;
  --hsl-s: 55.1%;
  --hsl-l: 38.4%;
  --hs:var(--hsl-h), var(--hsl-s);
  --hsl:var(--hs), var(--hsl-l);

  --color:       hsl(var(--hsl));
  --color-light: hsl(var(--hs), calc(var(--hsl-l) + (100% - var(--hsl-l)) * .9 ) );
  --color-dark:  hsl(var(--hs), calc(var(--hsl-l) * .7 ) );

  --color-bg:    hsl(var(--hs), 99.5%);
  --color-text:  hsl(var(--hs), calc(var(--hsl-l) * .4 ) );

  /* color 2 */
  --hsl2-h:calc(var(--hsl-h) - 60);
  --hsl2-s:var(--hsl-s);
  --hsl2-l:var(--hsl-l);
  --hs2:var(--hsl2-h), var(--hsl2-s);
  --hsl2:var(--hs2), var(--hsl2-l);

  --color2:       hsl(var(--hsl2));
  --color2-light: hsl(var(--hs2), calc(var(--hsl2-l) + (100% - var(--hsl2-l)) * .9 ) );
  --color2-dark:  hsl(var(--hs2), calc(var(--hsl2-l) * .7 ) );


  /* named */
  --color-area: var(--color-light);
  --color-line: var(--color-dark);

  --color-red :     hsl(0deg,   var(--hsl-s), var(--hsl-l));
  --color-orange :  hsl(30deg,  var(--hsl-s), var(--hsl-l));
  --color-yellow :  hsl(60deg,  var(--hsl-s), var(--hsl-l));
  --color-green :   hsl(120deg, var(--hsl-s), var(--hsl-l));
  --color-cyan :    hsl(180deg, var(--hsl-s), var(--hsl-l));
  --color-blue :    hsl(240deg, var(--hsl-s), var(--hsl-l));
  --color-violet :  hsl(270deg, var(--hsl-s), var(--hsl-l));
  --color-purple :  hsl(285deg, var(--hsl-s), var(--hsl-l));
  --color-magenta : hsl(300deg, var(--hsl-s), var(--hsl-l));

  --color-gray:       hsl(var(--hsl-h), 4%, 60%);
  --color-gray-light: hsl(var(--hsl-h), 4%, 90%);
  --color-gray-dark:  hsl(var(--hsl-h), 4%, 40%);

  /* misc */
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --width:35rem; /* rename? --main-width, --content-width */
  --line-width: 1px;

  --gap:1rem;
  /*
  --gap\.5:calc(var(--gap)/2);
  --gap2:calc(var(--gap)*2);

  --gap-xs:.25rem;
  --gap-s:.5rem;
  --gap-m:2rem;

  ## golden ratio?
  --gap-xs: calc(var(--gap-s) / 1.618);
  --gap-s:  calc(var(--gap)   / 1.618);
  --gap-m:  calc(var(--gap)   * 1.618);
  --gap-l:  calc(var(--gap-m) * 1.618);
  --gap-x:  calc(var(--gap-l) * 1.618);
  */

  --radius: .3rem;

  --shadow-x:0;
  --shadow-y:.25rem;
  --shadow:
      var(--shadow-x) var(--shadow-y) .8rem -.25rem rgba(23, 23, 23, 0.7),
      var(--shadow-x) var(--shadow-y) .5rem -.35rem rgba(23, 23, 23, 0.4);

}
@media (prefers-color-scheme: dark) {
  html {
    --color-light:   hsl(var(--hs), calc(var(--hsl-l) * .7 ) );
    --color-dark:    hsl(var(--hs), calc(var(--hsl-l) + (100% - var(--hsl-l)) * .9 ) );

    --color2-light: hsl(var(--hs2), calc(var(--hsl2-l) * .7 ) );
    --color2-dark:  hsl(var(--hs2), calc(var(--hsl2-l) + (100% - var(--hsl2-l)) * .9 ) );

    --color-bg:    hsl(var(--hs), calc(var(--hsl-l) * .4 ) );
    --color-text:  hsl(var(--hs), 99.5%);
  }
}