/* Premium Color Palette - Factora Invoice System */
:root {
    /* Core Brand Colors (Indigo/Violet/Cyan) */
    --primary: #6366f1;       /* Indigo 500 */
    --primary-dark: #4f46e5;  /* Indigo 600 */
    --primary-darker: #312e81;/* Indigo 900 */
    --primary-light: #818cf8; /* Indigo 400 */
    --primary-lighter: #c7d2fe;/* Indigo 200 */
    
    --secondary: #06b6d4;     /* Cyan 500 */
    --secondary-dark: #0891b2;/* Cyan 600 */
    --secondary-light: #67e8f9;/* Cyan 300 */
    
    --accent: #f472b6;        /* Pink 400 */
    --success: #10b981;       /* Emerald 500 */
    --warning: #f59e0b;       /* Amber 500 */
    --danger: #ef4444;        /* Red 500 */
    
    /* Neutral/Background Colors */
    --bg-body: #f8fafc;       /* Slate 50 */
    --bg-card: #ffffff;
    --text-main: #0f172a;     /* Slate 900 */
    --text-muted: #64748b;    /* Slate 500 */
    --border-color: #e2e8f0;  /* Slate 200 */

    /* Glassmorphism Variables */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

    /* Bootstrap Overrides */
    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-success: var(--success);
    --bs-danger: var(--danger);
    --bs-warning: var(--warning);
    --bs-info: var(--secondary);
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-main);
}

/* Dark Mode Theme */
[data-theme="dark"] {
    --primary: #818cf8;       /* Indigo 400 */
    --primary-dark: #6366f1;  /* Indigo 500 */
    --primary-darker: #c7d2fe;/* Indigo 200 (for text against dark) */
    
    --bg-body: #0f172a;       /* Slate 900 */
    --bg-card: #1e293b;       /* Slate 800 */
    --text-main: #f1f5f9;     /* Slate 100 */
    --text-muted: #94a3b8;    /* Slate 400 */
    --border-color: #334155;  /* Slate 700 */

    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Global Applications */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
}

.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.btn-primary { 
    background-color: var(--primary); 
    border-color: var(--primary);
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.4);
}
.btn-primary:hover { 
    background-color: var(--primary-dark); 
    border-color: var(--primary-dark);
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.5);
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}