:root {
  --color-bg: #f7f5f2;
  --color-bg-elevated: #ffffff;
  --color-primary: #5b8a8a;
  --color-primary-dark: #4a7373;
  --color-contract: #7b6ba8;
  --color-relax: #8fb996;
  --color-rest: #b8c5c5;
  --color-text: #2d3436;
  --color-text-muted: #636e72;
  --color-border: #e8e4df;
  --color-accent: #d4a574;
  --color-danger: #c0392b;
  --color-success: #27ae60;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --shadow-sm: 0 1px 3px rgba(45, 52, 54, 0.06);
  --shadow-md: 0 4px 16px rgba(45, 52, 54, 0.08);
  --shadow-lg: 0 8px 32px rgba(45, 52, 54, 0.12);

  --header-height: 56px;
  --max-width: 960px;
  --ring-size: min(72vw, 280px);
  --transition: 0.25s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1d1e;
    --color-bg-elevated: #252a2b;
    --color-primary: #6da3a3;
    --color-primary-dark: #5b8a8a;
    --color-text: #ecf0f1;
    --color-text-muted: #95a5a6;
    --color-border: #3d4446;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  }
}