: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: #052698;   /* 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); }