/* ============================================================
    DESIGN TOKENS — COLORS  [DEPRECATED]
    ╔══════════════════════════════════════════════════════════╗
    ║  DEPRECATED: Use --ds-* namespace (colors.css) instead. ║
    ║  This file kept for backward compat.                    ║
    ║  Do NOT use --color-* in new code — use --ds-*.         ║
    ╚══════════════════════════════════════════════════════════╝

    These complement (and intentionally mirror) the canonical
    --ds-* tokens in assets/css/colors.css. New component CSS
    should reference --ds-* names.
    ============================================================ */

:root {
    /* ---------- BRAND ---------- */
    --color-brand-primary:        #4D3F76;   /* Deep Aubergine-Plum */
    --color-brand-primary-light:  #6B5B96;   /* Lighter plum */
    --color-brand-primary-dark:   #3a2f59;   /* Dark plum (hover/active) */
    --color-brand-primary-hover:  #5a4d85;   /* Mid plum (generic hover) */
    --color-brand-charcoal:       #322D29;   /* Dark charcoal — hero gradient, sold badges, ramadan dark */
    --color-brand-sand:           #AC9C8D;   /* Warm sand/beige — ramadan badges */
    --color-brand-gold:           #C9A96E;   /* Gold CTA */
    --color-brand-gold-dark:      #B8965C;   /* Gold hover */
    --color-brand-coral:          #E27B7B;   /* Coral — sale tags */
    --color-brand-coral-dark:     #d06666;   /* Coral hover */

    /* ---------- TEXT ---------- */
    --color-text:             #2A2733;   /* Body / headings */
    --color-text-dark:        #333333;   /* Near-black (titles, names) */
    --color-text-secondary:   #666666;   /* Muted body copy */
    --color-text-muted:       #999999;   /* Placeholder / struck price */
    --color-text-light:       #cccccc;   /* Very light (disabled, bullets) */
    --color-text-inverse:     #FFFFFF;   /* Text on dark/colored bg */
    --color-text-on-primary:  #FFFFFF;   /* Text on brand bg */
    --color-text-on-dark:     #A69BC7;   /* Text on dark sections */

    /* ---------- BACKGROUNDS ---------- */
    --color-bg:             #F8F7FA;   /* Page background */
    --color-bg-alt:         #f5f5f5;   /* Alternate section bg */
    --color-bg-secondary:    #f8f8f8;   /* Main-deal section bg */
    --color-bg-muted:        #fafafa;   /* Subtle bg (inputs, hover) */
    --color-bg-dark:         #1A1525;   /* Dark bg (footer, dark sections) */
    --color-bg-card:         #FFFFFF;   /* Card / popup surface */
    --color-bg-white:        #FFFFFF;   /* Explicit white */

    /* ---------- BORDERS / DIVIDERS ---------- */
    --color-border:         #D6D0E8;   /* Primary border (lilac tint) */
    --color-border-light:    #eeeeee;   /* Light border / dividers */
    --color-border-input:    #e0e0e0;   /* Input border */

    /* ---------- SHADOWS (generic black-tinted) ---------- */
    --color-shadow-xs:   rgba(0, 0, 0, 0.05);
    --color-shadow-sm:   rgba(0, 0, 0, 0.08);
    --color-shadow:      rgba(0, 0, 0, 0.10);
    --color-shadow-md:   rgba(0, 0, 0, 0.15);
    --color-shadow-lg:   rgba(0, 0, 0, 0.16);
    --color-shadow-xl:   rgba(0, 0, 0, 0.20);
    --color-shadow-2xl:  rgba(0, 0, 0, 0.24);
    --color-shadow-focus: rgba(77, 63, 118, 0.15);

    /* ---------- RADII ---------- */
    --color-radius-xs:   4px;
    --color-radius-sm:   8px;
    --color-radius-md:   12px;
    --color-radius-lg:   16px;
    --color-radius-xl:   20px;
    --color-radius-pill: 999px;

    /* ---------- STATUS / FEEDBACK ---------- */
    --color-success:  #27AE60;
    --color-warning:  #F39C12;
    --color-danger:   #E74C3C;
    --color-info:     #3498DB;

    /* ---------- EXTENDED UI PALETTE (header / popups / product cards) ---------- */
    --color-text-strong:       #1a1a1a;   /* Headings inside popups (#1a1a1a / #222) */
    --color-text-strong-2:     #222222;
    --color-text-muted-2:      #444444;   /* Secondary button text */
    --color-text-placeholder:  #888888;   /* Floating labels, muted copy */
    --color-divider:           #f0f0f0;   /* Mini-cart item borders */
    --color-scrollbar:         #dddddd;   /* Scrollbar thumb */
    --color-surface-alt:       #f5f5f5;   /* Hover surfaces */
    --color-surface-hover:     #eeeeee;   /* Button hover bg */

    --color-danger-strong:     #e53935;   /* Discount badge / remove hover */
    --color-danger-soft:       #ffebee;
    --color-success-strong:    #2e7d32;   /* Express badge / success text */
    --color-success-soft:      #e8f5e9;
    --color-warning-strong:    #e65100;   /* Discount feature badge */
    --color-warning-soft:      #fff3e0;
    --color-info-strong:       #1565c0;   /* Stock feature badge */
    --color-info-soft:         #e3f2fd;
    --color-badge-sold-soft:   #fce4ec;   /* Sold feature badge */
    --color-badge-sold-strong: #c62828;

    --color-overlay-dark:      rgba(0, 0, 0, 0.7);    /* Low-stock badge bg */
    --color-shadow-brand-sm:   rgba(77, 63, 118, 0.22);
    --color-shadow-brand-md:   rgba(77, 63, 118, 0.28);
    --color-shadow-brand-lg:   rgba(77, 63, 118, 0.32);
    --color-shadow-soft:       rgba(0, 0, 0, 0.06);
    --color-shadow-strong:     rgba(0, 0, 0, 0.25);

    /* ---------- EXPRESS DELIVERY ---------- */
    --color-brand-express:      #c91c5e;   /* Express-delivery accent (magenta) */
    --color-brand-express-soft: #fff0f5;   /* Express-info box background */
    --color-brand-express-dark: #a01850;   /* Express hover / darker magenta */
    --color-brand-express-shadow: rgba(201, 28, 94, 0.10);  /* Express focus ring */

    /* ---------- BREADCRUMBS ---------- */
    --color-breadcrumb-bg:      #f8f9fa;   /* Breadcrumb strip background */
    --color-breadcrumb-current: #212529;   /* Current crumb text */
    --color-breadcrumb-text:    #6c757d;   /* Non-current crumb text */
}