/* ================================================
   Leena Jewellery CRM - Brand Design System
   Deep Purple & Cream Color Palette
   ================================================ */

:root {
    /* ==========================================
       PRIMARY COLORS - Deep Purple (Leena Brand)
       ========================================== */
    --color-primary-50: #F5F3F7;
    --color-primary-100: #E8E4ED;
    --color-primary-200: #C9BFD6;
    --color-primary-300: #A999BE;
    --color-primary-400: #6B5490;
    --color-primary-500: #4A3366;
    --color-primary-600: #2D1B4E;
    --color-primary-700: #1E1233;
    --color-primary-800: #140C22;
    --color-primary-900: #0A0611;

    /* ==========================================
       SECONDARY COLORS - Lighter Purple
       ========================================== */
    --color-secondary-50: #FAF8FC;
    --color-secondary-100: #F3EFF8;
    --color-secondary-200: #E6DDEF;
    --color-secondary-300: #D2C3E3;
    --color-secondary-400: #B9A0D4;
    --color-secondary-500: #9B7CC0;
    --color-secondary-600: #7B5AA6;
    --color-secondary-700: #5E4285;
    --color-secondary-800: #443062;
    --color-secondary-900: #2B1E40;

    /* ==========================================
       ACCENT COLORS - Cream (Leena Brand)
       ========================================== */
    --color-accent-50: #FFFDFB;
    --color-accent-100: #FFF8F0;
    --color-accent-200: #F5E6D3;
    --color-accent-300: #EBD9C4;
    --color-accent-400: #E0CBB4;
    --color-accent-500: #D4BDA4;
    --color-accent-600: #C4AA8E;
    --color-accent-700: #A88E72;
    --color-accent-800: #8B7259;
    --color-accent-900: #6E5743;

    /* ==========================================
       NEUTRAL COLORS - Slate
       ========================================== */
    --color-neutral-50: #F8FAFC;
    --color-neutral-100: #F1F5F9;
    --color-neutral-200: #E2E8F0;
    --color-neutral-300: #CBD5E1;
    --color-neutral-400: #94A3B8;
    --color-neutral-500: #64748B;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1E293B;
    --color-neutral-900: #0F172A;
    --color-neutral-950: #020617;

    /* ==========================================
       STATUS COLORS
       ========================================== */
    /* Success - Emerald */
    --color-success-50: #ECFDF5;
    --color-success-100: #D1FAE5;
    --color-success-200: #A7F3D0;
    --color-success-300: #6EE7B7;
    --color-success-400: #34D399;
    --color-success-500: #10B981;
    --color-success-600: #059669;
    --color-success-700: #047857;

    /* Warning - Amber */
    --color-warning-50: #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-200: #FDE68A;
    --color-warning-300: #FCD34D;
    --color-warning-400: #FBBF24;
    --color-warning-500: #F59E0B;
    --color-warning-600: #D97706;
    --color-warning-700: #B45309;

    /* Danger - Red */
    --color-danger-50: #FEF2F2;
    --color-danger-100: #FEE2E2;
    --color-danger-200: #FECACA;
    --color-danger-300: #FCA5A5;
    --color-danger-400: #F87171;
    --color-danger-500: #EF4444;
    --color-danger-600: #DC2626;
    --color-danger-700: #B91C1C;

    /* Info - Blue */
    --color-info-50: #EFF6FF;
    --color-info-100: #DBEAFE;
    --color-info-200: #BFDBFE;
    --color-info-300: #93C5FD;
    --color-info-400: #60A5FA;
    --color-info-500: #3B82F6;
    --color-info-600: #2563EB;
    --color-info-700: #1D4ED8;

    /* ==========================================
       PIPELINE STAGE COLORS
       ========================================== */
    --color-stage-new: #3B82F6;
    --color-stage-contacted: #8B5CF6;
    --color-stage-visit: #EC4899;
    --color-stage-quoted: #F59E0B;
    --color-stage-negotiating: #F97316;
    --color-stage-won: #10B981;
    --color-stage-lost: #EF4444;

    /* ==========================================
       CUSTOMER TIER COLORS
       ========================================== */
    --color-tier-vip: linear-gradient(135deg, #4A3366 0%, #2D1B4E 100%);
    --color-tier-vip-solid: #4A3366;
    --color-tier-regular: #64748B;
    --color-tier-new: #3B82F6;

    /* ==========================================
       PLATFORM COLORS
       ========================================== */
    --color-whatsapp: #25D366;
    --color-facebook: #1877F2;
    --color-instagram: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
    --color-instagram-solid: #E4405F;

    /* ==========================================
       GOLD KARAT COLORS
       ========================================== */
    --color-gold-24k: #FFD700;
    --color-gold-21k: #DAA520;
    --color-gold-18k: #B8860B;

    /* ==========================================
       LAYOUT DIMENSIONS
       ========================================== */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;
    --topbar-height: 64px;
    --chat-sidebar-width: 320px;

    /* ==========================================
       BORDER RADIUS
       ========================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ==========================================
       SHADOWS
       ========================================== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-primary: 0 4px 14px 0 rgba(45, 27, 78, 0.25);
    --shadow-primary-lg: 0 10px 25px -5px rgba(45, 27, 78, 0.3);

    /* Theme variables for lotix compatibility */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F6FA;
    --bg-tertiary: #F5F3F7;
    --bg-card: #FFFFFF;
    --bg-hover: #F5F3F7;
    --bg-active: #E8E4ED;
    --text-primary: #1E1233;
    --text-secondary: #4A3366;
    --text-tertiary: #6B5490;
    --text-muted: #94A3B8;
    --border-color: #E8E4ED;
    --border-color-light: #F5F3F7;
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);

    /* ==========================================
       TRANSITIONS
       ========================================== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ==========================================
       Z-INDEX LAYERS
       ========================================== */
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-fixed: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    --z-toast: 600;
}

/* ==========================================
   DARK MODE OVERRIDES
   ========================================== */
[data-theme="dark"],
.dark {
    /* Dark mode backgrounds (low numbers = backgrounds) */
    --color-neutral-50: #0F0A1A;   /* Main dark bg - deep purple tint */
    --color-neutral-100: #1A1226;  /* Slightly lighter bg */
    --color-neutral-200: #2D1B4E;  /* Borders, dividers - brand purple */
    --color-neutral-300: #3D2A5E;  /* Muted elements */
    --color-neutral-400: #6B5490;  /* Placeholder text */
    --color-neutral-500: #9B7CC0;  /* Secondary text */
    --color-neutral-600: #C9BFD6;  /* Primary text (muted) */
    --color-neutral-700: #E8E4ED;  /* Primary text */
    --color-neutral-800: #F5F3F7;  /* Emphasized text */
    --color-neutral-900: #FAFAFA;  /* Headings, high contrast */
    --color-neutral-950: #FFFFFF;  /* Pure white for highest contrast */

    /* Theme variables for dark mode */
    --bg-primary: #0F0A1A;
    --bg-secondary: #1A1226;
    --bg-tertiary: #2D1B4E;
    --bg-card: #1A1226;
    --bg-hover: #2D1B4E;
    --bg-active: #3D2A5E;
    --text-primary: #F5F3F7;
    --text-secondary: #C9BFD6;
    --text-tertiary: #9B7CC0;
    --text-muted: #6B5490;
    --border-color: #2D1B4E;
    --border-color-light: #1A1226;

    /* Stronger shadows for dark mode */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
    --shadow-primary: 0 4px 14px 0 rgba(74, 51, 102, 0.3);
    --shadow-primary-lg: 0 10px 25px -5px rgba(74, 51, 102, 0.4);
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.15);
    --shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.15);
}

/* ==========================================
   GRADIENT PRESETS
   ========================================== */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-600) 100%);
}

.gradient-primary-shine {
    background: linear-gradient(135deg, #6B5490 0%, #4A3366 50%, #2D1B4E 100%);
}

.gradient-cream {
    background: linear-gradient(135deg, var(--color-accent-100) 0%, var(--color-accent-300) 100%);
}

.gradient-luxury {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
}

.gradient-dark-luxury {
    background: linear-gradient(135deg, #1E1233 0%, #0F0A1A 100%);
}

/* ==========================================
   TEXT GRADIENT
   ========================================== */
.text-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-600) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-cream {
    background: linear-gradient(135deg, var(--color-accent-100) 0%, var(--color-accent-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   GLOW EFFECTS
   ========================================== */
.glow-primary {
    box-shadow: 0 0 20px rgba(45, 27, 78, 0.4);
}

.glow-primary-pulse {
    animation: primary-pulse 2s ease-in-out infinite;
}

@keyframes primary-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(45, 27, 78, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(45, 27, 78, 0.6);
    }
}

/* ==========================================
   SHIMMER EFFECT (for loading states)
   ========================================== */
.shimmer {
    background: linear-gradient(
        90deg,
        var(--color-neutral-200) 0%,
        var(--color-neutral-100) 50%,
        var(--color-neutral-200) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================
   SPARKLE ANIMATION (for VIP badges)
   ========================================== */
.sparkle {
    position: relative;
    overflow: hidden;
}

.sparkle::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 60%
    );
    animation: sparkle 3s ease-in-out infinite;
}

@keyframes sparkle {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}