/* kit v1.0.0, copied from metaproject/ui/kit */
/* theme.css: Auto / Light / Dark from one token block.

   color-scheme follows the choice, and light-dark() picks each token's value from it, so dark
   values are written once instead of twice (once in the media query, again for a forced
   data-theme="dark"; compare and mini_monitor duplicated theirs). light-dark() needs Safari
   17.5 / Chrome 123; every device here is newer. It only takes colors: for a shadow, put it on
   the color inside the shadow.

   Example app tokens (after this file):
     :root {
       --bg:     light-dark(#F4F1EC, #121214);
       --ink:    light-dark(#1C1B19, #EDEBE7);
       --accent: light-dark(#C2410C, #F08A4B);
       --on-accent: light-dark(#FFFFFF, #1A0F08);
       --shadow: 0 10px 30px light-dark(rgb(40 30 20 / .14), rgb(0 0 0 / .5));
     }

   Older pattern, if an app can't use light-dark(): keep one dark block and select it with
     @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { ... } }
     :root[data-theme="dark"] { ... }
   which still writes the values twice. */

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The toggle's icon: same box for every state, so switching never reflows the bar. */
.kit-theme-ic { width: 20px; height: 20px; display: block; }