:root {
  --sage-50: #f4f7f4;
  --sage-100: #e3ebe3;
  --sage-300: #a9c0aa;
  --sage-500: #7a9c7d;
  --sage-600: #5f8263;
  --sage-700: #4a6a4e;
  --sage-900: #26382a;

  --accent: var(--sage-600);

  --bg: #fafcfa;
  --surface: #ffffff;
  --text: #1e2b20;
  --text-muted: #5c6e5f;
  --danger: #c0564f;

  --trace-backswing: #3b82f6;
  --trace-downswing: #eab308;
  --trace-follow: #a855f7;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 1.5rem;

  --shadow-card: 0 1px 3px rgba(38, 56, 42, 0.08), 0 1px 2px rgba(38, 56, 42, 0.06);

  --tabbar-height: 64px;
  --appbar-height: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131a14;
    --surface: #1c261e;
    --text: #eef3ee;
    --text-muted: #9db09f;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}