:root {
  --color-blue: #1b4f9c;
  --color-blue-dark: #123a75;
  --color-red: #c0392b;
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-border: #d8dbe1;
  --color-text: #1c1f26;
  --color-text-muted: #6b7280;
  --color-danger: #c0392b;
  --color-success: #1e8e5a;

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

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

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

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

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #16181d;
    --color-surface: #1f222a;
    --color-border: #33363f;
    --color-text: #f2f3f5;
    --color-text-muted: #9aa0ab;
  }
}