/*
 * Colour tokens shared by every page, taken from design/figma/tokens.json. Pages use them through
 * Tailwind's variable shorthand, e.g. bg-(--brand) or text-(--ink).
 */
:root {
  --ink: #101828;
  --ink-muted: #475467;
  --ink-subtle: #667085;
  --surface: #ffffff;
  --canvas: #f9fafb;
  --line: #e4e7ec;

  --brand: #007aff;
  --brand-hover: #0062cc;
  --brand-tint: #e6f2ff;

  --praxis: #039855;
  --success: #039855;
  --success-tint: #ecfdf3;
  --waiting: #f79009;
  --waiting-ink: #b54708;
  --waiting-tint: #fffaeb;
  --danger: #d92d20;
  --danger-tint: #fef3f2;

  --wallet: #1d2939;
  --wallet-hover: #101828;
  --qr-surface: #f2f4f7;
  --qr-corner: #98a2b3;
}

html { font-family: "Noto Sans", ui-sans-serif, system-ui, sans-serif; }
body { background: var(--canvas); color: var(--ink); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}