:root {
  --vda-brand-700: #198754;
  --vda-brand-600: #22a063;
  --vda-brand-500: #28a745;
  --vda-brand-400: #32d27d;
  --vda-brand-gradient: linear-gradient(135deg, var(--vda-brand-700), var(--vda-brand-500) 55%, var(--vda-brand-400));

  --vda-bg: #f4f8f5;
  --vda-surface: #ffffff;
  --vda-surface-soft: #f8fbf9;
  --vda-border: #dbe7df;
  --vda-text: #12211a;
  --vda-text-muted: #5b6d63;

  --vda-info: #0b6ed0;
  --vda-danger: #d64545;
  --vda-warning: #a17700;
  --vda-success: #198754;

  --vda-font-heading: "Manrope", "Segoe UI", sans-serif;
  --vda-font-body: "DM Sans", "Segoe UI", sans-serif;

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

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-1: 0 6px 20px rgba(17, 44, 29, 0.06);
  --shadow-2: 0 12px 30px rgba(17, 44, 29, 0.1);

  --btn-height: 44px;
  --transition-fast: 180ms ease;
}

body.dark-mode {
  --vda-surface: #161b22;
  --vda-surface-soft: #21262d;
  --vda-border: #30363d;
  --vda-text: #e6edf3;
  --vda-text-muted: #8b949e;
}

@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not(.dark-mode) {
    --vda-surface: #161b22;
    --vda-surface-soft: #21262d;
    --vda-border: #30363d;
    --vda-text: #e6edf3;
    --vda-text-muted: #8b949e;
  }
}