/* ==========================================================================
   ZinVid Design System Variables
   ========================================================================== */

:root {
    /* Brand Primary Colors */
    --primary: #8b5cf6;
    --primary-hover: #7c3aed;
    --primary-light: #f3e8ff;
    --primary-gradient: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    --brand-gradient: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #3b82f6 100%);
    --card-gradient: linear-gradient(135deg, #f5f3ff 0%, #f0f9ff 100%);
    --hero-bg-gradient: linear-gradient(180deg, #faf5ff 0%, #f0f9ff 100%);

    /* Secondary & Accent Colors */
    --secondary: #2563eb;
    --secondary-hover: #1d4ed8;
    --secondary-light: #eff6ff;
    --accent: #ec4899;

    /* Semantic Status Colors */
    --success: #10b981;
    --success-light: #d1fae5;
    --success-border: #a7f3d0;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --danger-border: #fca5a5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --warning-border: #fcd34d;
    --info: #3b82f6;
    --info-light: #dbeafe;

    /* Neutrals & Surfaces (Light Mode) */
    --bg-main: #f9fafb;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-input: #f3f4f6;
    --bg-hover: #f3f4f6;
    --bg-glass: rgba(255, 255, 255, 0.9);

    /* Text & Borders (Light Mode) */
    --text-main: #111827;
    --text-muted: #4b5563;
    --text-light: #9ca3af;
    --border-color: #f3f4f6;
    --border-light: #f9fafb;
    --divider: #e5e7eb;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px -2px rgba(17, 24, 39, 0.05);
    --shadow-md: 0 6px 16px -4px rgba(17, 24, 39, 0.08);
    --shadow-lg: 0 12px 28px -4px rgba(139, 92, 246, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 40px -8px rgba(17, 24, 39, 0.15);
    --shadow-card: 0 4px 12px rgba(0,0,0,0.03);

    /* Layout Dimensions */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    --topbar-height: 60px;
    --bottom-nav-height: 64px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Mode Theme */
[data-theme="dark"] {
    --bg-main: #0b0f19;
    --bg-surface: #131b2e;
    --bg-card: #162036;
    --bg-sidebar: #0f172a;
    --bg-input: #1a253e;
    --bg-hover: #1e2c4a;
    --bg-glass: rgba(19, 27, 46, 0.85);

    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-light: #64748b;
    --border-color: #1e293b;
    --border-light: #25334d;
    --divider: #1e293b;

    --card-gradient: linear-gradient(180deg, rgba(22,32,54,0.9) 0%, rgba(19,27,46,0.95) 100%);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.6);

    --success-light: rgba(34, 197, 94, 0.15);
    --danger-light: rgba(239, 68, 68, 0.15);
    --warning-light: rgba(245, 158, 11, 0.15);
    --info-light: rgba(2, 132, 199, 0.15);
}