:root {
  --ds-font-family: "Inter", "Segoe UI", Arial, sans-serif;
  --ds-font-size-xs: 0.75rem;
  --ds-font-size-sm: 0.875rem;
  --ds-font-size-md: 1rem;
  --ds-font-size-lg: 1.125rem;
  --ds-font-size-xl: 1.5rem;

  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-strong: 700;

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

  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;

  --ds-color-bg: #ffffff;
  --ds-color-surface: #fafafa;
  --ds-color-surface-soft: #ffffff;
  --ds-color-line: #e5e7eb;
  --ds-color-line-soft: #e5e7eb;
  --ds-color-text: #111827;
  --ds-color-muted: #6b7280;
  --ds-color-secondary-text: #374151;
  --ds-color-primary: #2563eb;
  --ds-color-primary-hover: #1d4ed8;
  --ds-color-success: #15803d;
  --ds-color-warning: #b7791f;
  --ds-color-danger: #b91c1c;
  --ds-color-info: #0f766e;

  --ds-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --ds-shadow-md: 0 12px 28px rgba(17, 24, 39, 0.10);
  --ds-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

  --ds-z-drawer: 80;
}