:root {
  --primary-color: #D4573B;       /* الطوبي الأحمر */
  --secondary-color: #6E8B74;     /* الأخضر الزيتي */
  --accent-color: #E7A84A;        /* الخردلي */
  --neutral-light: #F8E9D4;       /* الكريمي / بيج فاتح */
  --neutral-dark: #8B5E3C;        /* البني الخشبي */
  --text-dark: #3A2F2A;           /* لون نص داكن مناسب */
}

/* أمثلة استخدام */
body {
  background-color: var(--neutral-light);
  color: var(--text-dark);
}
header {
  background-color: var(--neutral-light);
}
nav a {
  color: var(--neutral-dark);
}
nav a:hover {
  color: var(--accent-color);
}
.btn-primary {
  background-color: var(--primary-color);
  color: white;
}
footer {
  background-color: var(--neutral-dark);
  color: var(--neutral-light);
}
footer a {
  color: var(--accent-color);
}
.category-button {
  background-color: var(--neutral-dark); /* خلفية غامقة */
  color: var(--neutral-light); /* نص كريمي فاتح */
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}
.category-button:hover {
  background-color: var(--accent-color); /* تأثير عند المرور */
  color: var(--text-dark); /* نص داكن فوق الخردلي */
}