Enhancing CSS Variables in Droopler: Introducing Primitive, Semantic, and Component-Based Variables

This task focuses on expanding the CSS variables system in the Droopler theme by introducing a division into three categories: primitive, semantic, and component-based variables. This change will make the code more organized, flexible, and easier to maintain. Primitive variables will handle basic values such as colors, fonts, and spacing. Semantic variables will represent elements with specific meanings (e.g., header background, link colors), while component-based variables will be dedicated to individual blocks and modules in the theme, ensuring better code structure and reusability.