/* 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);
}