/* One palette for the site and the app. The site is dark only; the app sets
   data-theme on <html> and gets the light set of --bg/--fg aliases. Components
   in the site use --ink/--paper directly; the app reads --bg/--fg. */
:root {
  --ink: #0C0C0B;
  --paper: #EFEDE8;
  --gold: #E2C560;
  --mute: #A9A69E;
  --line: rgba(239, 237, 232, .18);
  --sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gutter: clamp(16px, 4vw, 48px);
  /* controls share one shape: a plate with the top-right and bottom-left corners cut */
  --cut: 12px;
  --chamfer: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));

  /* literal, not var(--ink): the app redefines --ink as its foreground */
  --bg: #0C0C0B;
  --fg: #EFEDE8;
  --muted: var(--mute);
  --faint: rgba(239, 237, 232, .3);
  --rule: rgba(239, 237, 232, .14);
  --field: rgba(239, 237, 232, .08);
  --accent: var(--gold);
  --seg-on: rgba(239, 237, 232, .16);
  /* buttons are keys: a hairline rim, a 2px edge below, a soft drop; pressing sinks them */
  --key-face: #1C1C1A;
  --key: inset 0 0 0 1px var(--rule), 0 2px 0 rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .35);
  --key-down: inset 0 0 0 1px var(--rule), inset 0 3px 6px rgba(0, 0, 0, .4);
  --key-gold: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 2px 0 #8A5A1E, 0 6px 14px rgba(0, 0, 0, .35);
  --key-gold-down: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 3px 6px rgba(0, 0, 0, .28);
  --well: inset 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(239, 237, 232, .08);
}
:root[data-theme="light"] {
  --bg: #EFEDE8;
  --fg: #0C0C0B;
  --muted: #6F6C66;
  --faint: rgba(12, 12, 11, .3);
  --rule: rgba(12, 12, 11, .12);
  --field: rgba(12, 12, 11, .06);
  --accent: #A8681C;   /* gold is too pale on paper; this is the same hue, darker */
  --seg-on: rgba(255, 255, 255, .9);
  --key-face: #F4F2ED;
  --key: inset 0 0 0 1px rgba(12, 12, 11, .14), 0 2px 0 rgba(12, 12, 11, .14), 0 6px 14px rgba(0, 0, 0, .12);
  --key-down: inset 0 0 0 1px rgba(12, 12, 11, .14), inset 0 3px 6px rgba(0, 0, 0, .22);
  --key-gold: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 0 #7A4B14, 0 6px 14px rgba(0, 0, 0, .14);
  --key-gold-down: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 0 3px 6px rgba(0, 0, 0, .25);
  --well: inset 0 2px 6px rgba(0, 0, 0, .14), inset 0 0 0 1px rgba(12, 12, 11, .08);
}