/**
 * AutoParts Pro CEO Dashboard
 * CSS Variables & Theme System
 * EDESSIS SRL - 2026
 */

/* ===== ROOT VARIABLES ===== */
:root {
    /* Font Family */
    --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font Sizes */
    --fs-xs: 9px;
    --fs-sm: 10px;
    --fs-base: 12px;
    --fs-md: 13px;
    --fs-lg: 14px;
    --fs-xl: 15px;
    --fs-2xl: 16px;
    --fs-3xl: 18px;
    --fs-4xl: 20px;
    --fs-5xl: 24px;
    --fs-6xl: 36px;
    
    /* Font Weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;
    
    /* Spacing */
    --sp-1: 4px;
    --sp-2: 6px;
    --sp-3: 8px;
    --sp-4: 10px;
    --sp-5: 12px;
    --sp-6: 14px;
    --sp-7: 16px;
    --sp-8: 18px;
    --sp-9: 20px;
    --sp-10: 24px;
    
    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-3xl: 16px;
    --radius-4xl: 18px;
    --radius-5xl: 22px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index */
    --z-dropdown: 50;
    --z-sticky: 60;
    --z-fixed: 70;
    --z-modal-backdrop: 80;
    --z-modal: 90;
    --z-nav: 100;
    --z-tooltip: 110;
    --z-notification: 120;
    
    /* Layout */
    --topbar-height: 60px;
    --bottomnav-height: 66px;
    --sidebar-width: 280px;
    --max-content-width: 460px;
    
    /* Safe Areas (iOS) */
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    /* Primary Colors */
    --p: #7c6fff;
    --p2: #6558f5;
    --pl: #9d93ff;
    --pg: linear-gradient(135deg, #7c6fff, #00b4d8);
    
    /* Status Colors */
    --ok: #00d68f;
    --ok-light: rgba(0, 214, 143, 0.1);
    --wrn: #ffaa00;
    --wrn-light: rgba(255, 170, 0, 0.1);
    --err: #ff5c5c;
    --err-light: rgba(255, 92, 92, 0.1);
    --info: #00b4d8;
    --info-light: rgba(0, 180, 216, 0.1);
    
    /* Background Colors */
    --bg: #060b18;
    --bg2: #0c1225;
    --bg3: #131b33;
    --bg4: #1b2540;
    --bg5: #25314d;
    
    /* Surface Colors */
    --sf: rgba(19, 27, 51, 0.88);
    --sf2: rgba(20, 28, 48, 0.92);
    
    /* Text Colors */
    --tx: #f0f2ff;
    --t2: #8892b0;
    --t3: #5a6380;
    
    /* Glass/Border */
    --gb: rgba(124, 111, 255, 0.15);
    --card-sh: 0 2px 12px rgba(0, 0, 0, 0.25);
    
    /* Navigation */
    --topbg: rgba(6, 11, 24, 0.85);
    --botbg: rgba(6, 11, 24, 0.92);
    
    /* Accent Colors */
    --accent-purple: #e040fb;
    --accent-purple-light: rgba(224, 64, 251, 0.1);
    --accent-cyan: #48cae4;
    --accent-green: #33ffb1;
    
    /* Chart Colors */
    --chart-1: #7c6fff;
    --chart-2: #00d68f;
    --chart-3: #ffaa00;
    --chart-4: #ff5c5c;
    --chart-5: #00b4d8;
    --chart-6: #e040fb;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #7c6fff, #00b4d8);
    --gradient-success: linear-gradient(90deg, #00d68f, #33ffb1);
    --gradient-warning: linear-gradient(90deg, #ffaa00, #ffcc4d);
    --gradient-danger: linear-gradient(90deg, #ff5c5c, #ff8a8a);
    --gradient-info: linear-gradient(90deg, #00b4d8, #48cae4);
    --gradient-purple: linear-gradient(90deg, #e040fb, #ea80fc);
    --gradient-hero: linear-gradient(135deg, #2d1b69 0%, #4a2fbd 40%, #0077b6 100%);
    
    /* Scrollbar */
    --scrollbar-track: transparent;
    --scrollbar-thumb: var(--bg5);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    /* Primary Colors */
    --p: #6558f5;
    --p2: #5348d4;
    --pl: #7c6fff;
    --pg: linear-gradient(135deg, #6558f5, #0096c7);
    
    /* Status Colors */
    --ok: #059669;
    --ok-light: rgba(5, 150, 105, 0.08);
    --wrn: #d97706;
    --wrn-light: rgba(217, 119, 6, 0.08);
    --err: #dc2626;
    --err-light: rgba(220, 38, 38, 0.08);
    --info: #0284c7;
    --info-light: rgba(2, 132, 199, 0.08);
    
    /* Background Colors */
    --bg: #f1f5f9;
    --bg2: #e9eef6;
    --bg3: #ffffff;
    --bg4: #e2e8f0;
    --bg5: #cbd5e1;
    
    /* Surface Colors */
    --sf: rgba(255, 255, 255, 0.95);
    --sf2: rgba(255, 255, 255, 0.98);
    
    /* Text Colors */
    --tx: #0f172a;
    --t2: #475569;
    --t3: #94a3b8;
    
    /* Glass/Border */
    --gb: rgba(101, 88, 245, 0.12);
    --card-sh: 0 2px 12px rgba(0, 0, 0, 0.06);
    
    /* Navigation */
    --topbg: rgba(241, 245, 249, 0.88);
    --botbg: rgba(241, 245, 249, 0.92);
    
    /* Accent Colors */
    --accent-purple: #c026d3;
    --accent-purple-light: rgba(192, 38, 211, 0.08);
    --accent-cyan: #0891b2;
    --accent-green: #10b981;
    
    /* Chart Colors */
    --chart-1: #6558f5;
    --chart-2: #059669;
    --chart-3: #d97706;
    --chart-4: #dc2626;
    --chart-5: #0284c7;
    --chart-6: #c026d3;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6558f5, #0096c7);
    --gradient-success: linear-gradient(90deg, #059669, #10b981);
    --gradient-warning: linear-gradient(90deg, #d97706, #f59e0b);
    --gradient-danger: linear-gradient(90deg, #dc2626, #ef4444);
    --gradient-info: linear-gradient(90deg, #0284c7, #0ea5e9);
    --gradient-purple: linear-gradient(90deg, #c026d3, #d946ef);
    --gradient-hero: linear-gradient(135deg, #6558f5 0%, #7c6fff 40%, #0096c7 100%);
    
    /* Scrollbar */
    --scrollbar-track: var(--bg2);
    --scrollbar-thumb: var(--bg5);
}

/* ===== STATUS COLOR VARIANTS ===== */
[data-theme="dark"], [data-theme="light"] {
    /* KPI Card Variants */
    --kpi-v1: var(--pg);
    --kpi-v2: var(--gradient-success);
    --kpi-v3: var(--gradient-warning);
    --kpi-v4: var(--gradient-danger);
    --kpi-v5: var(--gradient-info);
    --kpi-v6: var(--gradient-purple);
}

/* ===== ANIMATION KEYFRAMES ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

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

/* ===== ANIMATION CLASSES ===== */
.animate-fade-in { animation: fadeIn var(--transition-slow); }
.animate-slide-up { animation: slideUp var(--transition-slow); }
.animate-slide-down { animation: slideDown var(--transition-slow); }
.animate-pulse { animation: pulse 2s infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-scale-in { animation: scaleIn var(--transition-slow); }

/* ===== UTILITY VARIABLES ===== */
.text-primary { color: var(--p) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--wrn) !important; }
.text-danger { color: var(--err) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--t2) !important; }
.text-light { color: var(--t3) !important; }

.bg-primary { background: var(--p) !important; }
.bg-success { background: var(--ok) !important; }
.bg-warning { background: var(--wrn) !important; }
.bg-danger { background: var(--err) !important; }
.bg-info { background: var(--info) !important; }