:root {
    --primary-color: #894fff;
    --primary-rgb: 137, 79, 255;
    --secondary-color: #230630;
    --accent-color: #db95af;

    /* Global Color Palette — the 4 consistent theme roles */
    --color-primary: #230630;
    --color-primary-rgb: 35, 6, 48;
    --color-secondary: #db95af;
    --color-secondary-rgb: 219, 149, 175;
        --bg-image-url: url('https://mytrendylooks.com/uploads/bg_1784907266.png');
    }

/* Storefront theme tokens (Website Background Color + the single global
   color-text role) — scoped to the public storefront only. The admin console
   keeps its own fixed dark design system (body.admin-shell), so this never
   affects admin readability. Every container (filter sidebar, promotional
   banner, product cards, auth card, modal, etc.) resolves to the SAME
   color-primary background and the SAME color-text text color, which is the
   consistency fix: no more mismatched per-component background/text colors. */
body:not(.admin-shell) {
    --color-background: #16191f;
    --color-text: #f3f4f6;
    --color-text-rgb: 243, 244, 246;

    --bg-primary: var(--color-background);
    --bg-secondary: var(--color-primary);
    --dark-bg: var(--color-background);
    --dark-card: var(--color-primary);
    --dark-border: rgba(var(--color-text-rgb), 0.15);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text);
    --text-muted: var(--color-text);
}