/* the palette: every colour the site uses, named for what it's for, as light-dark(light,
   dark) pairs. tokens.css builds the bevels and gradients from them and the components only
   use the names.

   which half is used is plain css: it follows the system's prefers-color-scheme, no js
   needed. the deskbar's theme button pins one by setting data-theme on the root (see
   Window.astro), which only narrows color-scheme. dark is graphite chrome on a night desk
   and dark paper; the yellow tab is hydrant's, so it's the same in both. */

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

:root {
  /* the desk behind the window */
  --desk: light-dark(#33689a, #1c3048);
  --desk-glow: light-dark(#4c86bd, #2a4666);
  --desk-deep: light-dark(#24507a, #0e1a2a);

  /* window chrome */
  --chrome: light-dark(#d8d8d8, #3a3c40);
  --chrome-hover: light-dark(#dcdcdc, #414449);
  /* top of the toolbar, fading into --chrome */
  --chrome-bar: light-dark(#f4f4f4, #4a4d52);
  --chrome-header: light-dark(#f6f6f6, #4a4d52);                 /* list section headers */
  --chrome-header-end: light-dark(#e0e0e0, #3e4045);
  --menu: light-dark(#ececec, #3e4045);                          /* menus, fading left to right */
  --menu-end: light-dark(#e2e2e2, #36383c);
  --edge: light-dark(#4a4a4a, #0c0d0f);                          /* the outline of every box */
  /* etched lines: group boxes, separators, dividers */
  --etch: light-dark(#9a9a9a, #6a6d72);
  --track: light-dark(#c4c4c4, #2c2e31);                          /* scrollbar troughs */
  --rule: light-dark(#c8c8c8, #2a2c30);                          /* thin rules between list headers */

  /* bevels: light comes from the top left */
  --hi: light-dark(#fff, #5c6066);                               /* lit edges */
  --lo: light-dark(#a8a8a8, #26282b);                            /* shaded edges of chrome */
  /* shaded edges of what's sunk in: fields, wells, paper */
  --lo-deep: light-dark(#8a8a8a, #121315);
  --pressed-edge: light-dark(#555, #000);                        /* a pressed button's dark top left */
  --pressed-lo: light-dark(#ececec, #4a4d52);                    /* and its lit bottom right */
  --shadow: light-dark(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6)); /* the window on the desk */
  --drop-shadow: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
  --icon-shadow: light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.5));
  /* a 1px rim where the icons' dark outlines would vanish on dark chrome (Sprite.astro) */
  --icon-rim-colour: light-dark(transparent, rgba(255, 255, 255, 0.3));
  --icon-rim: url(#icon-rim);
  --emboss: 0 1px 0 light-dark(#fff, rgba(0, 0, 0, 0.55));       /* text pressed into the chrome */

  /* controls */
  --control: light-dark(#fff, #62666c);                          /* a button's gradient, top to bottom */
  --control-mid: light-dark(#e4e4e4, #4c4f54);
  --control-end: light-dark(#bdbdbd, #3a3c40);
  --control-hover-mid: light-dark(#eaeff6, #4c5664);
  --control-hover-end: light-dark(#c4cfdd, #3a4452);
  --control-pressed: light-dark(#9c9c9c, #26282b);
  --control-pressed-mid: light-dark(#bcbcbc, #2e3034);
  --control-pressed-end: light-dark(#cdcdcd, #36383c);
  --field: light-dark(#fff, #232528);                            /* text fields, fading in from --field-top */
  --field-top: light-dark(#ececec, #1a1b1e);
  --focus: light-dark(#3f7ad0, #5a9ae8);
  --glyph: light-dark(#3a3a3a, #c4c6ca);                         /* drawn arrows and triangles */

  /* text */
  --text: light-dark(#1b1b1b, #dcdcd8);
  --heading: light-dark(#1b1b1b, #f0f0ec);
  --text-2: light-dark(#3a3a3a, #cacac6);                        /* the banner, the credits */
  /* a setting's first line, a page's sections in the menu */
  --text-3: light-dark(#5a5a5a, #a8aaad);
  /* labels on chrome: menu groups, key hints */
  --dim: light-dark(#6a6a6a, #a2a5aa);
  --faint: light-dark(#8a8a8a, #868a90);                         /* defaults, counts, placeholders */
  --muted: light-dark(#7a7360, #c4bca6);                         /* quiet text on paper */
  --link: light-dark(#1f4f9c, #8cb8ff);
  --link-chrome: light-dark(#123a78, #b4d2ff);                    /* links on grey chrome need more weight */

  /* selecting and pointing */
  --select: light-dark(#8ab4ee, #5a8ad8);                        /* the selection gradient, light to dark */
  --select-mid: light-dark(#4a82d4, #3a6ac0);
  --select-end: light-dark(#2a5cab, #234e98);
  --on-select: #fff;
  --on-select-dim: light-dark(#dfe9f8, #d4e0f4);
  --hover: light-dark(#e6edf7, #2e3a4a);                         /* a flat thing you point at */
  --press: light-dark(#cfdcee, #3a4c64);                         /* and press */
  --ico-hover: light-dark(#c6d4e8, #3a4c64);
  --mark: light-dark(#ffe46e, #6e5a0c);                          /* search matches */
  --mark-edge: light-dark(#d0a800, #c8a020);
  --mark-on-select: light-dark(#ffd21a, #8a6e00);
  --flash: light-dark(#fff3c0, #4a4220);                         /* the heading you just jumped to */

  /* the yellow tab */
  --tab: #ffe46e;
  --tab-mid: #ffcb00;
  --tab-end: #f2b800;
  --tab-hi: #fff6c2;
  --tab-lo: #d9a800;
  --tab-text: #2a2100;

  /* paper */
  --paper: light-dark(#fffdf8, #222220);
  --paper-alt: light-dark(#fbf9f2, #272724);                     /* every other table row */
  --paper-hi: light-dark(#fff, #2e2d29);
  --paper-rule: light-dark(#ece6d2, #36352f);
  --paper-edge: light-dark(#cfc6a8, #4c493e);
  /* white boxes on paper or chrome: lists, tables */
  --sheet: light-dark(#fff, #1d1d1b);
  --sheet-rule: light-dark(#f0ebd8, #2c2b27);
  --banner: light-dark(#fffdf6, #2e2d28);
  --banner-end: light-dark(#f3eedc, #252420);
  --quote: light-dark(#f8f4e6, #2a2924);
  --quote-text: light-dark(#4a4536, #c8c0a8);
  --code-bg: light-dark(#f3f1ea, #2c2b27);                       /* inline code */
  --code-edge: light-dark(#ddd8c8, #45423a);
  --well: light-dark(#fbfaf4, #181816);                          /* code blocks */

  /* code highlighting */
  --code-text: light-dark(#1b1b1b, #e0e0dc);
  --code-comment: light-dark(#8a8578, #8e8a7c);
  --code-string: light-dark(#3f7a1a, #9ccf7c);
  --code-constant: light-dark(#a8301f, #f0907a);
  --code-keyword: light-dark(#1f4f9c, #8cb8ff);
  --code-function: light-dark(#6a3a9c, #c8a4f0);
  --code-type: light-dark(#8a5a00, #e4bc64);
  --code-property: light-dark(#1f4f9c, #8cb8ff);
  --code-parameter: light-dark(#8a5a00, #e4bc64);
}