:root {
  --cp-bg: #0b1424;
  --cp-bg-2: #0f1d32;
  --cp-surface: #13243e;
  --cp-surface-soft: #182b49;
  --cp-border: #243a5e;
  --cp-text: #dbe7f6;
  --cp-text-soft: #8ca3c4;

  --cp-accent: #2f8bff;
  --cp-accent-hover: #1f74e0;

  --cp-success: #17a56b;
  --cp-warning: #d59f1a;
  --cp-error: #cc4a52;
  --cp-info: #2b93cb;

  --cp-radius-sm: 10px;
  --cp-radius-md: 14px;
  --cp-radius-lg: 18px;

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

  --cp-duration-fast: 150ms;
  --cp-duration-base: 180ms;
  --cp-duration-slow: 220ms;

  --cp-shadow-1: 0 8px 24px rgba(3, 12, 24, 0.2);
  --cp-shadow-2: 0 14px 36px rgba(3, 12, 24, 0.28);
}

[data-theme="light"] {
  --cp-bg: #f8fafc;
  --cp-bg-2: #ffffff;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f1f5fb;
  --cp-border: #e2e8f0;
  --cp-text: #0f172a;
  --cp-text-soft: #475569;

  --cp-accent: #3b82f6;
  --cp-accent-hover: #2563eb;

  --cp-success: #16a34a;
  --cp-warning: #ca8a04;
  --cp-error: #dc2626;
  --cp-info: #0284c7;

  --cp-shadow-1: 0 8px 24px rgba(15, 23, 42, 0.08);
  --cp-shadow-2: 0 14px 36px rgba(15, 23, 42, 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --cp-bg: #f8fafc;
    --cp-bg-2: #ffffff;
    --cp-surface: #ffffff;
    --cp-surface-soft: #f1f5fb;
    --cp-border: #e2e8f0;
    --cp-text: #0f172a;
    --cp-text-soft: #475569;

    --cp-accent: #3b82f6;
    --cp-accent-hover: #2563eb;

    --cp-success: #16a34a;
    --cp-warning: #ca8a04;
    --cp-error: #dc2626;
    --cp-info: #0284c7;

    --cp-shadow-1: 0 8px 24px rgba(15, 23, 42, 0.08);
    --cp-shadow-2: 0 14px 36px rgba(15, 23, 42, 0.12);
  }
}