/* Site-wide design tokens. Keep raw design values here and consume them with var(). */
:root{
  /* Typography */
  --font-family-base: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-size-body: 16px;
  --font-size-min: 14px;
  --font-size-title-sm: 18px;
  --font-size-title-md: 20px;
  --font-size-title-lg: 24px;
  --font-size-title-xl: 32px;
  --line-height-body: 1.7;
  --line-height-compact: 1.5;

  --home-summary-lines: 5;

  /* Brand and text colors */
  --color-brand: #0196e3;
  --color-brand-hover: #007fbe;
  --color-text-primary: #222222;
  --color-text-secondary: #666666;
  --color-text-muted: #888888;
  --color-text-inverse: #ffffff;
  --color-border: #e2e2e2;
  --color-border-light: #eeeeee;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-page: #f7f7f7;
  --color-danger: #c00000;
  --color-success: #287d46;

  /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Shared component geometry */
  --radius-sm: 4px;
  --radius-card: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
  --content-width: 1200px;
  --column-gap: 24px;
}