:root {
  --color-brand: #17884F;
  --color-brand-hover: #126D40;
  --color-deep: #173D2B;
  --color-soft: #DFF6E8;
  --color-page: #F4F7F6;
  --color-surface: #FFFFFF;
  --color-text: #17211C;
  --color-muted: #66736C;
  --color-border: #DDE5E0;
  --color-info: #2F6FD6;
  --color-warning: #E6A23C;
  --color-danger: #D94B4B;
  --color-info-soft: #EDF3FF;
  --color-info-surface: #F4F7FF;
  --color-info-border: #C9DAFA;
  --color-warning-soft: #FFF7E8;
  --color-warning-surface: #FFFAF0;
  --color-warning-border: #F0D49B;
  --color-danger-soft: #FFF0F0;

  --font-sans: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --content-max: 1440px;
  --client-sidebar: 216px;
  --client-topbar: 56px;
  --public-header: 72px;
  --breakpoint-mobile: 768px;
  --breakpoint-desktop: 1200px;

  --shadow-sm: 0 1px 2px rgba(23, 33, 28, 0.05);
  --shadow-panel: 0 8px 20px rgba(23, 33, 28, 0.06);
  --focus-ring: 0 0 0 3px rgba(47, 111, 214, 0.24);
  --ease-standard: 160ms ease;
}