:root {
    /* ==================== Brand Colors ==================== */
    /* Primary (Indigo/Purple) */
    --primary-color: #6366f1;
    /* Main Brand Color */
    --primary-dark: #4f46e5;
    /* Darker shade for hover/active */
    --primary-light: #818cf8;
    /* Lighter shade for accents */

    /* Secondary (Emerald/Green) */
    --secondary-color: #10b981;
    /* Success/Secondary action */

    /* Accent (Amber/Orange) */
    --accent-color: #f59e0b;
    /* Warnings/Highlights */

    /* Functional Colors */
    --danger-color: #ef4444;
    /* Errors/Destructive actions */

    /* WhatsApp Colors */
    --whatsapp-primary: #25D366;
    --whatsapp-primary-dark: #128C7E;
    --whatsapp-secondary: #34B7F1;

    /* Typography */
    --font-family: 'Cairo', 'Tajawal', sans-serif;

    /* ==================== Light Theme (Data Attribute) ==================== */
    /* Light theme overrides (applied when data-theme="light") */

    /* DARK THEME (DEFAULT) */
    --bg-main: #0f172a;
    /* Deep Blue/Slate Background */
    --bg-dark: var(--bg-main);
    /* Alias for legacy support */
    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e293b 100%);
    --bg-sidebar: rgba(15, 23, 42, 0.95);
    --bg-card: rgba(30, 41, 59, 0.7);
    --bg-input: rgba(15, 23, 42, 0.6);

    --text-main: #f8fafc;
    /* White/Off-white text */
    --text-muted: #94a3b8;
    /* Gray text */
    --text-dark: #0f172a;
    /* Dark text (for use on light badges etc) */

    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Spacing & Radius */
    --radius-sm: 0.5rem;
    /* 8px */
    --radius-md: 0.75rem;
    /* 12px */
    --radius-lg: 1rem;
    /* 16px */
    --radius-xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --container-max-width: 1400px;
}

/* ==================== Light Theme Override (Commented Out) ==================== */
[data-theme="light"] {
    --bg-main: #f8fafc;
    --bg-gradient: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #f1f5f9;

    --text-main: #1e293b;
    --text-muted: #64748b;
    --text-dark: #f8fafc;

    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: 1px solid #e2e8f0;
    --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}