/* what the components are built from: bevels and gradients made out of the palette, and the
site's measurements. themes don't touch this file.
depth means something here: raised is pressable, sunken is something you put things in (or
a state that's on), flat is information. light always comes from the top left. */
:root {
--font: "Hanken Grotesk", system-ui, sans-serif;
--mono: "Geist Mono", ui-monospace, monospace;
/* corners: buttons a little soft, boxes just off square */
--r-btn: 4px;
--r-box: 2px;
/* the window's fixed top and bottom (measured by scripts/edges.ts) and the list column
beside the paper (set per page by Window.astro) */
--head-h: 104px;
--foot-h: 46px;
--list-w: 220px;
--desk-bg: var(--desk) radial-gradient(ellipse at 30% 0%, var(--desk-glow) 0%, var(--desk) 55%, var(--desk-deep) 100%) fixed;
/* bevels */
--raised: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo-deep);
--raised-soft: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
--sunken: inset 1px 1px 0 var(--pressed-edge), inset 2px 2px 0 rgba(0, 0, 0, 0.14), inset -1px -1px 0 var(--pressed-lo);
--well-edge: inset 1px 1px 0 var(--lo-deep), inset -1px -1px 0 var(--hi);
--code-well: inset 1px 1px 0 var(--lo-deep), inset 2px 2px 0 rgba(0, 0, 0, 0.06);
--drop: 3px 3px 0 var(--drop-shadow);
--emboss-select: 0 -1px 0 var(--shadow);
/* gradients */
--grad-control: linear-gradient(var(--control), var(--control-mid) 45%, var(--control-end));
--grad-control-hover: linear-gradient(var(--control), var(--control-hover-mid) 45%, var(--control-hover-end));
--grad-pressed: linear-gradient(var(--control-pressed), var(--control-pressed-mid) 40%, var(--control-pressed-end));
--grad-bar: linear-gradient(var(--chrome-bar), var(--chrome));
--grad-header: linear-gradient(var(--chrome-header), var(--chrome-header-end));
--grad-menu: linear-gradient(90deg, var(--menu), var(--menu-end));
--grad-field: linear-gradient(var(--field-top), var(--field) 40%);
--grad-key: linear-gradient(var(--control), var(--chrome));
--grad-tab: linear-gradient(var(--tab), var(--tab-mid) 60%, var(--tab-end));
--grad-select: linear-gradient(135deg, var(--select), var(--select-mid) 45%, var(--select-end));
--grad-banner: linear-gradient(var(--banner), var(--banner-end));
}