/* Shared by the H5 storefront and /mobile.html. The build copies this static
 * file to /static/css/storefront.css as well as bundling the App.vue import.
 * These tokens style storefront chrome only. Merchant --view-* theme values,
 * DIY canvas coordinates, module colors and image styling remain independent. */
:root {
  --vibe-font: "Helvetica Neue", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --vibe-surface: #fff;
  --vibe-backdrop: #f4f3ef;
  --vibe-ink: #23362d;
  --vibe-muted: #596159;
  --vibe-accent: #33483c;
  --vibe-control: #f3f4f0;
  --vibe-line: #e4e7df;
  --vibe-hover: #e5eae4;
  --vibe-pressed: #dae2da;
  --vibe-focus: #315d47;
  --vibe-gutter: 20px;
  --vibe-space-sm: 8px;
  --vibe-space-md: 16px;
  --vibe-space-lg: 24px;
  --vibe-radius-control: 8px;
  --vibe-text-sm: 14px;
  --vibe-text-base: 16px;
  --vibe-control-height: 44px;
  --vibe-nav-height: 50px;
  --vibe-frame-width: 480px;
  --vibe-frame-shadow: 0 12px 40px rgba(38, 61, 53, .08);
}