/* assets/css/design-system.css */

:root {
    /* Color Palette - Light Mode (Glassmorphism) */
    --malik-bg-base: #f8fafc;
    --malik-bg-card: rgba(255, 255, 255, 0.75);
    --malik-bg-card-hover: rgba(255, 255, 255, 0.95);
    
    --malik-primary: #6d28d9;
    --malik-primary-hover: #5b21b6;
    --malik-secondary: #0891b2;
    --malik-gradient: linear-gradient(90deg, var(--malik-secondary), var(--malik-primary));
    
    --malik-text-main: #0f172a;
    --malik-text-muted: #475569;
    
    --malik-success: #0d9488;
    --malik-warning: #d97706;
    --malik-danger: #dc2626;
    --malik-info: #0284c7;

    /* Compatibility aliases used by the feature stylesheets. */
    --malik-bg: var(--malik-bg-base);
    --malik-surface: var(--malik-bg-card);
    --malik-surface-hover: var(--malik-bg-card-hover);
    --malik-border: rgba(15, 23, 42, 0.12);
    --malik-text-inverse: #ffffff;
    --malik-accent: var(--malik-secondary);
    --malik-glass-bg: var(--malik-bg-card);
    
    /* Effects */
    --malik-glass-blur: blur(24px);
    --malik-glass-border-color: rgba(0, 0, 0, 0.08);
    --malik-glass-border: 1px solid var(--malik-glass-border-color);
    /* Typography */
    --malik-font-family: 'Inter', 'Tajawal', system-ui, -apple-system, sans-serif;
    
    --malik-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --malik-shadow-md: 0 12px 32px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.05);
    
    /* Radii */
    --malik-radius-md: 16px;
    --malik-radius-lg: 24px;
    --malik-radius-sm: 10px;
    --malik-radius-full: 9999px;
    
    /* Transitions */
    --malik-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --malik-bg-base: #11151F;
        --malik-bg-card: rgba(30, 36, 50, 0.55);
        --malik-bg-card-hover: rgba(30, 36, 50, 0.85);
        
        --malik-primary: #8b5cf6;
        --malik-primary-hover: #a855f7;
        --malik-secondary: #06b6d4;
        
        --malik-text-main: #ffffff;
        --malik-text-muted: #94a3b8;
        
        --malik-success: #2dd4bf;
        --malik-warning: #fbbf24;
        --malik-danger: #f87171;
        --malik-info: #38bdf8;
        --malik-border: rgba(255, 255, 255, 0.12);
        --malik-text-inverse: #11151f;
        
        --malik-glass-border-color: rgba(255, 255, 255, 0.08);
        --malik-glass-border: 1px solid var(--malik-glass-border-color);
        --malik-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
        --malik-shadow-md: 0 12px 32px -4px rgba(0, 0, 0, 0.5), 0 4px 12px -4px rgba(0, 0, 0, 0.3);
    }
}

/* Fallback for theme classes that force dark mode */
html[data-theme="dark"],
body.dark,
body.dark-mode {
    --malik-bg-base: #11151F;
    --malik-bg-card: rgba(30, 36, 50, 0.55);
    --malik-bg-card-hover: rgba(30, 36, 50, 0.85);
    --malik-text-main: #ffffff;
    --malik-text-muted: #94a3b8;
    --malik-border: rgba(255, 255, 255, 0.12);
    --malik-text-inverse: #11151f;
    --malik-glass-border-color: rgba(255, 255, 255, 0.08);
    --malik-glass-border: 1px solid var(--malik-glass-border-color);
}

/* Explicit light mode wins when a WordPress theme provides a theme switcher. */
html[data-theme="light"],
body.light,
body.light-mode {
    --malik-bg-base: #f8fafc;
    --malik-bg-card: rgba(255, 255, 255, 0.75);
    --malik-bg-card-hover: rgba(255, 255, 255, 0.95);
    --malik-primary: #6d28d9;
    --malik-primary-hover: #5b21b6;
    --malik-secondary: #0891b2;
    --malik-text-main: #0f172a;
    --malik-text-muted: #475569;
    --malik-success: #0d9488;
    --malik-warning: #d97706;
    --malik-danger: #dc2626;
    --malik-info: #0284c7;
    --malik-border: rgba(15, 23, 42, 0.12);
    --malik-text-inverse: #ffffff;
    --malik-glass-border-color: rgba(0, 0, 0, 0.08);
    --malik-glass-border: 1px solid var(--malik-glass-border-color);
    --malik-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --malik-shadow-md: 0 12px 32px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.05);
}

/* Base Utility Classes */
.malik-glass-panel {
    background: var(--malik-bg-card);
    backdrop-filter: var(--malik-glass-blur);
    -webkit-backdrop-filter: var(--malik-glass-blur);
    border: var(--malik-glass-border);
    border-radius: var(--malik-radius-lg);
    box-shadow: var(--malik-shadow-md);
}

/* App-like container for mobile / Dashboard-like for desktop */
.malik-app-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--malik-font-family);
    color: var(--malik-text-main);
    padding: 20px;
}