/* ==========================================================================
   SAMRAA SHOP - UNIFIED DESIGN TOKENS
   Preserves all root brand colors & ERP compatibility aliases while
   providing a normalized, modern scale for the fashion storefront.
   ========================================================================== */

@import url("../../../assets/css/tokens.css");

:root {
    /* --------------------------------------------------------------------------
       1. COLOR SYSTEM (Storefront Unified Palette)
       -------------------------------------------------------------------------- */
    --shop-primary: #5A1835;              /* Burgundy luxury brand */
    --shop-primary-dark: #3A102F;         /* Deep Plum */
    --shop-primary-hover: #74345A;        /* Bright Plum */
    --shop-primary-soft: #F9F0F4;         /* Subtle brand tint for badges/chips */
    --shop-primary-rgb: 90, 24, 53;

    --shop-accent: #C5A059;               /* Muted Gold */
    --shop-accent-hover: #D4AF37;         /* Vivid Gold */
    --shop-accent-soft: #FDF9F0;          /* Soft Gold Tint */

    --shop-text: #171518;                 /* Primary readable text */
    --shop-text-secondary: #554F54;       /* Secondary details */
    --shop-text-muted: #7E767D;           /* Muted / placeholders */
    --shop-text-inverse: #FFFFFF;

    --shop-surface: #FFFFFF;              /* Cards & panels */
    --shop-surface-alt: #FAF8F9;          /* Page background / alternate rows */
    --shop-surface-elevated: #FFFFFF;

    --shop-border: #E8E2E6;               /* Clean subtle borders */
    --shop-border-soft: #F2EEF1;
    --shop-border-focus: rgba(90, 24, 53, 0.4);

    --shop-success: #10B981;
    --shop-success-soft: #ECFDF5;
    --shop-warning: #F59E0B;
    --shop-warning-soft: #FFFBEB;
    --shop-danger: #EF4444;
    --shop-danger-soft: #FEF2F2;
    --shop-info: #3B82F6;
    --shop-info-soft: #EFF6FF;

    /* --------------------------------------------------------------------------
       2. TYPOGRAPHY SCALE (Arabic-capable, legible, iOS >= 16px inputs)
       -------------------------------------------------------------------------- */
    --shop-font-family: 'Cairo', 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --shop-font-2xs: 0.72rem;     /* ~11.5px */
    --shop-font-xs: 0.80rem;      /* ~13px */
    --shop-font-sm: 0.875rem;     /* 14px */
    --shop-font-base: 1rem;       /* 16px */
    --shop-font-md: 1.125rem;     /* 18px */
    --shop-font-lg: 1.25rem;      /* 20px */
    --shop-font-xl: 1.5rem;       /* 24px */
    --shop-font-2xl: 1.875rem;    /* 30px */
    --shop-font-3xl: 2.25rem;     /* 36px */

    /* --------------------------------------------------------------------------
       3. SPACING SCALE (4/8px base)
       -------------------------------------------------------------------------- */
    --shop-space-1: 4px;
    --shop-space-2: 8px;
    --shop-space-3: 12px;
    --shop-space-4: 16px;
    --shop-space-5: 20px;
    --shop-space-6: 24px;
    --shop-space-8: 32px;
    --shop-space-10: 40px;
    --shop-space-12: 48px;
    --shop-space-16: 64px;

    /* --------------------------------------------------------------------------
       4. BORDER RADII (Soft 12-16px aesthetic)
       -------------------------------------------------------------------------- */
    --shop-radius-sm: 8px;
    --shop-radius-md: 12px;
    --shop-radius-lg: 16px;
    --shop-radius-xl: 20px;
    --shop-radius-pill: 999px;
    --shop-radius-circle: 50%;

    /* --------------------------------------------------------------------------
       5. SHADOWS SCALE (Subtle, calm, luxury)
       -------------------------------------------------------------------------- */
    --shop-shadow-xs: 0 1px 3px rgba(90, 24, 53, 0.04);
    --shop-shadow-sm: 0 2px 8px rgba(90, 24, 53, 0.06);
    --shop-shadow-md: 0 6px 18px rgba(90, 24, 53, 0.08);
    --shop-shadow-lg: 0 12px 32px rgba(90, 24, 53, 0.10);
    --shop-shadow-xl: 0 20px 45px rgba(90, 24, 53, 0.14);
    --shop-shadow-focus: 0 0 0 3px rgba(90, 24, 53, 0.18);

    /* --------------------------------------------------------------------------
       6. CONTAINER WIDTHS & Z-INDEX SCALE
       -------------------------------------------------------------------------- */
    --shop-container-max: 1240px;
    --shop-z-base: 1;
    --shop-z-dropdown: 100;
    --shop-z-sticky: 200;
    --shop-z-drawer: 500;
    --shop-z-modal: 1000;
    --shop-z-toast: 1100;
    --shop-z-tooltip: 1200;

    /* --------------------------------------------------------------------------
       7. TRANSITIONS & MOTION
       -------------------------------------------------------------------------- */
    --shop-transition-fast: 150ms ease;
    --shop-transition-base: 250ms ease;
    --shop-transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Mode Storefront Mapping */
html[data-theme="dark"] {
    --shop-primary: #74345A;
    --shop-primary-dark: #5A1835;
    --shop-primary-hover: #8A486C;
    --shop-primary-soft: rgba(116, 52, 90, 0.22);

    --shop-accent: #E2C695;
    --shop-accent-hover: #F0D9B0;
    --shop-accent-soft: rgba(226, 198, 149, 0.12);

    --shop-text: #F7F5F7;
    --shop-text-secondary: #B8B0B6;
    --shop-text-muted: #827880;

    --shop-surface: #1A1018;
    --shop-surface-alt: #120B11;
    --shop-surface-elevated: #241722;

    --shop-border: rgba(116, 52, 90, 0.22);
    --shop-border-soft: rgba(255, 255, 255, 0.08);
    --shop-border-focus: rgba(226, 198, 149, 0.45);

    --shop-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shop-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shop-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shop-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shop-shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.65);
    --shop-shadow-focus: 0 0 0 3px rgba(226, 198, 149, 0.25);
}