:root {
    /* Main Layout Colors */
    --body-color: #ffffff; /* Pure white for backgrounds */
    --dark-color: #03153a; /* Very dark navy/blue for titles and text instead of pure black */
    --primary-color: #0f3fb0; /* Deep brand blue (used for "Shop Now", active links, buttons) */
    --secondary-color: #6000a0; /* Vibrant electric/light blue for accents, badges, and glows */

    /* Supporting Backgrounds and Grays */
    --extra-color-1: #f4f7fc; /* Very light grayish-blue for section backgrounds & product cards */
    --extra-color-2: #6e7e99; /* Slate gray for small body text, descriptions, and "FROM" labels */
    --extra-color-3: #1946ba; /* Button hover blue (slightly darker/vibrant blue) */
    --extra-color-4: #e1e8f5; /* Border gray for buttons or structural lines */
    --extra-color-5: #0a1c43; /* Darker footer or premium badge blue */

    /* Status and Special Labels */
    --extra-color-6: #00a3ff; /* "BEST SELLER" or "RX" label blue background */
    --extra-color-7: #ffffff; /* Text inside dark buttons */
}

/* --- Color Classes --- */
.body-color {
    color: var(--body-color);
}
.dark-color {
    color: var(--dark-color);
} /* Use this for titles like "PREMIUM RESEARCH..." */
.primary-color {
    color: var(--primary-color);
}
.secondary-color {
    color: var(--secondary-color);
}
.extra-color-1 {
    color: var(--extra-color-1);
}
.extra-color-2 {
    color: var(--extra-color-2);
} /* Use for paragraph/description text */

/* --- Background Classes --- */
.body-bg {
    background-color: var(--body-color);
}
.dark-bg {
    background-color: var(--dark-color);
}
.primary-bg {
    background-color: var(--primary-color);
} /* Use for main buttons and active tabs */
.secondary-bg {
    background-color: var(--secondary-color);
}
.extra-bg-1 {
    background-color: var(--extra-color-1);
} /* Use for product card background */
.extra-bg-2 {
    background-color: var(--extra-color-2);
}
.extra-bg-3 {
    background-color: var(--extra-color-3);
}