:root {
  /* Brand Base Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-black: #333329;
  --color-yellow: #f0c01b;

  /* Role-Based Usage */
  --primary-color: var(--color-black);     /* Headings, navbar */
  --background-color: var(--color-white);  /* General page background */
  --text-color: var(--color-grey-black);   /* Body text, icon labels */
  --accent-color: var(--color-yellow);     /* Buttons, CTAs, link highlights */
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: 'Inter', sans-serif;
}

/* ✴️ Label Fixes */
label, .label, .text-label, span {
  color: var(--text-color); /* ✅ apply readable grey-black */
}

/* 🧠 Vendor Modal & Sidebar */
#vendorModal label,
#vendorFilterContainer label,
#categoryFilterContainer label {
  color: var(--text-color);
}