/* Design tokens from design/DESIGN.md. Everything else reads from these. */
:root {
  /* surfaces */
  --wallpaper: #c4c4cb;
  --wallpaper-line: #d9d9df;
  --sheet: #ffffff;
  --sheet-dot: #dcdce2;
  --sheet-rule: #eeeef1;
  --soft: #f4f4f6;
  --border: #dedee3;
  --border-soft: #e6e6ea;
  --dim-sheet: #ebebee;      /* page behind the settings sheet */
  --switch-off: #e3e3e8;
  --grabber: #d6d6dc;

  /* text */
  --ink: #1f1f24;
  --ink-strong: #141417;
  --muted: #4a4a52;
  --dim: #6b6b74;
  --placeholder: #8a8a93;
  --off-dot: #c4c4cb;
  --expired-dot: #b4b4bb;

  /* accents */
  --sticker: #c8443a;
  --live: #2f9e54;  --live-text: #17703e;
  --sealed: #3346d3; --sealed-text: #2a39b0;
  --maybe-text: #8a5a00;
  --danger: #a51d35; --danger-border: #e6a7b2;
  --cursor-green: #2f9e54; --cursor-blue: #3346d3; --cursor-orange: #d1542a; --cursor-amber: #b8730f;
  --lock-bg: #26262c; --lock-dim: #c9c9d2; --lock-fg: #f2f2f5;

  /* type */
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-display: 'Roboto Serif', Georgia, serif;
  --font-pixel: 'Silkscreen', monospace;

  /* radius */
  --r-btn: 12px; --r-input: 12px; --r-panel: 16px; --r-box: 22px; --r-prompt: 26px; --r-pill: 999px;
  --shadow-float: 0 18px 40px -26px rgba(31,31,36,.35);
  --shadow-prompt: 0 18px 40px -24px rgba(31,31,36,.3);
  --shadow-sheet: 0 30px 60px -30px rgba(31,31,36,.35);
  --shadow-sticker: 0 20px 40px -18px rgba(31,31,36,.55);
  --shadow-pass: 0 24px 40px -20px rgba(31,31,36,.45), inset 0 0 0 1px rgba(31,31,36,.12);

  /* layout */
  --sheet-max: 1240px;
  --column-max: 1040px;
  --gutter: 32px;
  --dot-size: 28px;
  --sheet-radius: 22px;
  --wallpaper-below: 56px;
}

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
    --dot-size: 24px;
    --sheet-radius: 26px;
    --wallpaper-below: 28px;
  }
}