:root {
  --color-primary: #4caf50;
  --color-primary-hover: #45a049;
  --color-info: #2196f3;
  --color-info-hover: #1976d2;
  --color-link: #007bff;
  --color-danger: #f44336;
  --color-danger-hover: #da190b;
  --color-warning: #856404;
  --color-success-bg: #d4edda;
  --color-error-bg: #f8d7da;
  --color-error-fg: #721c24;
  --color-error-border: #f5c6cb;
  --color-question: #5b5bf3;

  --color-fg: #333;
  --color-fg-muted: #666;
  --color-fg-faint: #888;
  --color-fg-disabled: #999;

  --color-bg: #fff;
  --color-bg-subtle: #f9f9f9;
  --color-bg-muted: #f5f5f5;
  --color-bg-stripe: #f2f2f2;
  --color-bg-hover: #e8e8e8;

  --color-border: #ddd;
  --color-border-strong: #ccc;
  --color-border-soft: #e0e0e0;

  --color-focus: #2196f3;

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

  --font-family-base: "Reem Kufi", sans-serif;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 25px;

  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.12);
}