:root {
  /* اللون الأساسي */
  --color-brand: #7a1d71;
  
  /* درجات اللون الأساسي */
  --color-brand-light: #9a4a92;
  --color-brand-lighter: #ba78b4;
  --color-brand-lightest: #dba7d6;
  --color-brand-dark: #5b1553;
  --color-brand-darker: #3d0e38;
  
  /* ألوان النص */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-lighter: #999999;
  --color-text-on-brand: #ffffff;
  
  /* ألوان الخلفية */
  --color-background: #ffffff;
  --color-background-alt: #f8f8f8;
  --color-background-dark: #f0f0f0;
  
  /* ألوان الحدود */
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-border-dark: #cccccc;
  
  /* ألوان الحالات */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;
}

/* تطبيق الألوان على العناصر الأساسية */
body {
  color: var(--color-text);
  background-color: var(--color-background);
}

a {
  color: var(--color-brand);
}

a:hover {
  color: var(--color-brand-dark);
}

button, .button {
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
  border: 1px solid var(--color-brand-dark);
}

button:hover, .button:hover {
  background-color: var(--color-brand-dark);
}

.header {
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

.footer {
  background-color: var(--color-brand-darker);
  color: var(--color-text-on-brand);
}

.card {
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
}

/* يمكنك إضافة المزيد من القواعد حسب حاجة موقعك */