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