/* ═══════════════════════════════════════════════════════════
   QR1 - CSS Variables & Themes System (v2.0)
   10 Themes Included
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ─── Shared System Values (No Theme Change) ─── */
    --font-main: 'IBM Plex Sans Arabic', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Layout */
    --header-height: 70px;
    --footer-height: 60px;
    --sidebar-width: 280px;
    --container-max: 1200px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows (Base) */
    --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);
    
    /* Default Radius */
    --radius: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   THEMES DEFINITIONS
   ═══════════════════════════════════════════════════════════ */

/* 1. Tech Blue (Default) */
:root, [data-theme="blue"] {
    --brand-primary: #2563eb;       /* Blue 600 */
    --brand-secondary: #1e293b;     /* Slate 800 */
    
    --bg-body: #f8fafc;             /* Slate 50 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    
    --text-primary: #0f172a;        /* Slate 900 */
    --text-muted: #64748b;          /* Slate 500 */
    --text-inverse: #ffffff;
    
    --border-color: #e2e8f0;        /* Slate 200 */
    --radius: 0.5rem;
}

/* 2. Modern Violet */
[data-theme="violet"] {
    --brand-primary: #7c3aed;       /* Violet 600 */
    --brand-secondary: #111827;     /* Gray 900 */
    
    --bg-body: #f9fafb;             /* Gray 50 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    
    --text-primary: #111827;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;
    
    --border-color: #e5e7eb;
    --radius: 1rem;                 /* Rounded */
}

/* 3. Fresh Teal */
[data-theme="teal"] {
    --brand-primary: #0d9488;       /* Teal 600 */
    --brand-secondary: #134e4a;     /* Teal 900 */
    
    --bg-body: #f0fdfa;             /* Teal 50 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    
    --text-primary: #042f2e;
    --text-muted: #64748b;          /* Keep gray for readability */
    --text-inverse: #ffffff;
    
    --border-color: #ccfbf1;
    --radius: 0.75rem;
}

/* 4. Dark Luxury */
[data-theme="dark"] {
    --brand-primary: #eab308;       /* Yellow 500 (Gold) */
    --brand-secondary: #0f172a;     /* Slate 900 */
    
    --bg-body: #0f172a;             /* Slate 900 */
    --bg-card: #1e293b;             /* Slate 800 */
    --bg-sidebar: #1e293b;
    
    --text-primary: #f8fafc;        /* Slate 50 */
    --text-muted: #94a3b8;          /* Slate 400 */
    --text-inverse: #0f172a;
    
    --border-color: #334155;        /* Slate 700 */
    --radius: 0.25rem;              /* Sharp */
}

/* 5. Nature Emerald */
[data-theme="emerald"] {
    --brand-primary: #059669;       /* Emerald 600 */
    --brand-secondary: #064e3b;     /* Emerald 900 */
    
    --bg-body: #ecfdf5;             /* Emerald 50 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    
    --text-primary: #064e3b;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    
    --border-color: #d1fae5;
    --radius: 0.75rem;
}

/* 6. Sunset Orange */
[data-theme="orange"] {
    --brand-primary: #f97316;       /* Orange 500 */
    --brand-secondary: #431407;     /* Orange 950 */
    
    --bg-body: #fff7ed;             /* Orange 50 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    
    --text-primary: #1a0401;
    --text-muted: #7c2d12;
    --text-inverse: #ffffff;
    
    --border-color: #ffedd5;
    --radius: 1rem;
}

/* 7. Royal Red */
[data-theme="red"] {
    --brand-primary: #b91c1c;       /* Red 700 */
    --brand-secondary: #450a0a;     /* Red 950 */
    
    --bg-body: #fef2f2;             /* Red 50 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    
    --text-primary: #450a0a;
    --text-muted: #7f1d1d;
    --text-inverse: #ffffff;
    
    --border-color: #fee2e2;
    --radius: 0.25rem;
}

/* 8. Minimal Gray */
[data-theme="gray"] {
    --brand-primary: #4b5563;       /* Gray 600 */
    --brand-secondary: #111827;     /* Gray 900 */
    
    --bg-body: #f3f4f6;             /* Gray 100 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    
    --text-primary: #111827;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;
    
    --border-color: #e5e7eb;
    --radius: 0px;                  /* Sharp */
}

/* 9. Sweet Pink */
[data-theme="pink"] {
    --brand-primary: #f472b6;       /* Pink 400 */
    --brand-secondary: #831843;     /* Pink 900 */
    
    --bg-body: #fdf2f8;             /* Pink 50 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    
    --text-primary: #831843;
    --text-muted: #be185d;
    --text-inverse: #ffffff;
    
    --border-color: #fbcfe8;
    --radius: 1.5rem;               /* Very rounded */
}

/* 10. Ocean Indigo */
[data-theme="indigo"] {
    --brand-primary: #4338ca;       /* Indigo 700 */
    --brand-secondary: #1e1b4b;     /* Indigo 950 */
    
    --bg-body: #eef2ff;             /* Indigo 50 */
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    
    --text-primary: #1e1b4b;
    --text-muted: #3730a3;
    --text-inverse: #ffffff;
    
    --border-color: #e0e7ff;
    --radius: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES (Helpers)
   ═══════════════════════════════════════════════════════════ */

/* Text Colors */
.text-primary   { color: var(--text-primary); }
.text-muted     { color: var(--text-muted); }
.text-brand     { color: var(--brand-primary); }
.text-inverse   { color: var(--text-inverse); }

/* Backgrounds */
.bg-body    { background-color: var(--bg-body); }
.bg-card    { background-color: var(--bg-card); }
.bg-brand   { background-color: var(--brand-primary); }
.bg-sidebar { background-color: var(--bg-sidebar); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--brand-primary);
    color: var(--text-inverse);
}
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
}
.btn-outline:hover {
    background-color: var(--bg-body);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}