@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/bricolage-3084aa15.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/hanken-7b3229a0.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Slate ink, cool paper canvas, price-tag yellow, till-drawer green. */
  --ink: #18222e;
  --ink-2: #46535f;
  --ink-3: #6d7a87;
  --line: #dce2e8;
  --line-strong: #c3ccd5;
  --canvas: #eef2f5;
  --surface: #ffffff;
  --paper: #fffdf6;

  --tag: #ffc83d;
  --tag-soft: #fff2c7;
  --tag-ink: #3a2a00;

  --green: #0e7a5a;
  --green-dark: #0a5f46;
  --green-soft: #dcf3ea;

  --red: #c0322a;
  --red-soft: #fce6e3;
  --amber: #8a5a00;
  --amber-soft: #fff0c9;
  --blue: #1f55d6;
  --blue-soft: #e4ecff;

  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgb(24 34 46 / 0.06);
  --shadow: 0 2px 6px rgb(24 34 46 / 0.06), 0 8px 24px rgb(24 34 46 / 0.06);
  --shadow-lift: 0 12px 40px rgb(24 34 46 / 0.22);

  --sidebar-w: 236px;
  --touch: 46px;
}