/* Shared design language for every tool on the site: warm paper, a grey
   "device" panel, a dark LCD display and keycap buttons. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
}

:root {
  --paper: #EFE3CF;      /* ground */
  --card: #FBF7EF;       /* lists */
  --panel: #CFCBC3;      /* device */
  --ink: #232220;        /* display */
  --line: #15171C;       /* outlines, text */
  --signal: #FF5B1A;     /* primary */
  --signal-dark: #B33A08;
  --coin: #F6C21A;       /* totals, icons */
  --bill: #9FD08F;       /* receipts */
  --key: #ECE9E3;
  --key-shadow: #9E9A92;
  --key-sunk: #DCD8D1;
  --muted: #5A4E3C;
  --label: #4A4844;
  --lcd-label: #B5B0A6;
  --dash: #D6C4A6;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--line);
  font: 15px/1.4 var(--sans);
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--line); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--signal); outline-offset: 2px; }

/* Small uppercase mono label used everywhere on the device. */
.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}

/* Raised keycap button. */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: var(--key);
  box-shadow: 0 3px 0 var(--key-shadow), inset 0 1px 0 #FFFFFF;
  color: var(--line);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--key-shadow), inset 0 1px 0 #FFFFFF; }
.key.square { width: 44px; padding: 0; }
.key:disabled { background: var(--key-sunk); color: #8C877E; box-shadow: none; cursor: default; transform: none; }
.key[aria-pressed="true"] {
  background: var(--ink);
  color: #FFFFFF;
  box-shadow: 0 1px 0 #000, inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* The grey device body with its two screws. */
.panel {
  position: relative;
  background: var(--panel);
  border-radius: 26px;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #A9A49B, 0 14px 24px rgba(80, 60, 30, 0.14);
}
.panel.screws::before, .panel.screws::after {
  content: '';
  position: absolute;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--key-shadow);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}
.panel.screws::before { left: 10px; }
.panel.screws::after { right: 10px; }

/* The dark LCD display. */
.lcd {
  background: var(--ink);
  color: #F4F1EA;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.lcd .label { color: var(--lcd-label); }

/* Paper card with a hard offset shadow. */
.paper {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--dash);
}