:root {
  --color-primary: #1B5E20;
  --color-primary-dark: #0D3B0F;
  --color-primary-light: #2E7D32;
  --color-secondary: #1565C0;
  --color-secondary-light: #E3F2FD;
  --color-accent: #F57C00;
  --color-accent-dark: #E65100;
  --color-bg-white: #FFFFFF;
  --color-bg-gray: #F5F5F5;
  --color-bg-topbar: #F8F8F8;
  --color-text-dark: #333333;
  --color-text-mid: #666666;
  --color-text-light: #999999;
  --color-border: #E0E0E0;
  --color-border-light: #E8E8E8;
  --color-footer: #1A1A1A;
  --color-footer-text: #AAAAAA;
  --color-footer-muted: #888888;
  --color-footer-line: #444444;

  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;
  --spacing-2xl: 96px;

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

  --font-body: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  --header-topbar-h: 36px;
  --header-logo-h: 100px;
  --header-nav-h: 50px;
  --container-max: 1280px;
  --page-gutter: 60px;
  --side-nav-w: 220px;
  --transition: 0.25s ease;
}

@media (max-width: 1199.98px) {
  :root {
    --page-gutter: 24px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --page-gutter: 16px;
    --header-logo-h: 64px;
  }
}