:root {
  --o2o-font-sans: "Segoe UI", Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  --o2o-bg: #f5f7fb;
  --o2o-surface: #ffffff;
  --o2o-surface-2: #eef3f8;
  --o2o-surface-3: #e5edf5;
  --o2o-text: #182230;
  --o2o-text-strong: #0f172a;
  --o2o-muted: #667085;
  --o2o-border: #d7dee8;
  --o2o-border-strong: #b8c3d2;
  --o2o-primary: #2563eb;
  --o2o-primary-strong: #1d4ed8;
  --o2o-primary-soft: #e8f0ff;
  --o2o-success: #16803c;
  --o2o-success-soft: #e8f7ee;
  --o2o-warning: #b7791f;
  --o2o-warning-soft: #fff5db;
  --o2o-danger: #b42318;
  --o2o-danger-soft: #fff0ee;
  --o2o-info: #0e7490;
  --o2o-info-soft: #e6f7fb;
  --o2o-focus: rgba(37, 99, 235, 0.28);
  --o2o-radius-sm: 4px;
  --o2o-radius-md: 6px;
  --o2o-radius-lg: 8px;
  --o2o-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
  --o2o-shadow-md: 0 8px 22px rgba(16, 24, 40, 0.14);
  --o2o-touch-sm: 36px;
  --o2o-touch-md: 44px;
  --o2o-touch-lg: 56px;
  --o2o-space-1: 4px;
  --o2o-space-2: 8px;
  --o2o-space-3: 12px;
  --o2o-space-4: 16px;
  --o2o-space-5: 20px;
  --o2o-space-6: 24px;
  --o2o-transition: 120ms ease;
  --o2o-pay-page-bg: #f3f6fb;
  --o2o-pay-panel-bg: #ffffff;
  --o2o-pay-panel-bg-2: #eef3f8;
  --o2o-pay-input-bg: #ffffff;
  --o2o-pay-border: #d7dee8;
  --o2o-pay-border-strong: #bcc8d8;
  --o2o-pay-text: #182230;
  --o2o-pay-text-strong: #0f172a;
  --o2o-pay-text-muted: #5f6f84;
  --o2o-pay-emphasis-bg: #ffffff;
  --o2o-pay-emphasis-border: #cfd8e6;
  --o2o-pay-emphasis-text: #14263f;
  --o2o-pay-divider: rgba(24, 49, 83, 0.12);
  --o2o-pay-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  --o2o-pay-key-bg: #f0d089;
  --o2o-pay-key-bg-hover: #e2bd6d;
  --o2o-pay-key-text: #1a2230;
  --o2o-pay-action-bg: #d6a95a;
  --o2o-pay-action-bg-hover: #c99844;
  --o2o-pay-action-text: #1a2230;
}

body.theme-dark {
  --o2o-bg: #0e141c;
  --o2o-surface: #17202b;
  --o2o-surface-2: #202b37;
  --o2o-surface-3: #2a3746;
  --o2o-text: #eef4fb;
  --o2o-text-strong: #ffffff;
  --o2o-muted: #a9b7c8;
  --o2o-border: #344357;
  --o2o-border-strong: #506179;
  --o2o-primary: #60a5fa;
  --o2o-primary-strong: #3b82f6;
  --o2o-primary-soft: rgba(96, 165, 250, 0.16);
  --o2o-success: #34d399;
  --o2o-success-soft: rgba(52, 211, 153, 0.14);
  --o2o-warning: #f6c453;
  --o2o-warning-soft: rgba(246, 196, 83, 0.15);
  --o2o-danger: #fb7185;
  --o2o-danger-soft: rgba(251, 113, 133, 0.13);
  --o2o-info: #38bdf8;
  --o2o-info-soft: rgba(56, 189, 248, 0.14);
  --o2o-focus: rgba(96, 165, 250, 0.34);
  --o2o-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --o2o-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.36);
  --o2o-pay-page-bg: #111821;
  --o2o-pay-panel-bg: #1a2430;
  --o2o-pay-panel-bg-2: #202c39;
  --o2o-pay-input-bg: #233140;
  --o2o-pay-border: #3b4b5f;
  --o2o-pay-border-strong: #53657a;
  --o2o-pay-text: #eef4fb;
  --o2o-pay-text-strong: #ffffff;
  --o2o-pay-text-muted: #b7c3d1;
  --o2o-pay-emphasis-bg: #202b37;
  --o2o-pay-emphasis-border: #53657a;
  --o2o-pay-emphasis-text: #fff7dc;
  --o2o-pay-divider: rgba(255, 255, 255, 0.14);
  --o2o-pay-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  --o2o-pay-key-bg: #c79a4d;
  --o2o-pay-key-bg-hover: #d8ab5d;
  --o2o-pay-key-text: #10161f;
  --o2o-pay-action-bg: #ddb364;
  --o2o-pay-action-bg-hover: #e7bf76;
  --o2o-pay-action-text: #10161f;
}