/* ═══════════════════════════════════════════════════════════
   Mizkar Design System — Premium Real Estate SaaS
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Brand */
    --ds-purple: #7C3AED;
    --ds-purple-hover: #6D28D9;
    --ds-purple-soft: rgba(124, 58, 237, 0.12);
    --ds-purple-glow: rgba(124, 58, 237, 0.35);
    --ds-blue: #2563EB;
    --ds-blue-soft: rgba(37, 99, 235, 0.12);
    --ds-cyan: #06B6D4;
    --ds-cyan-soft: rgba(6, 182, 212, 0.12);
    --ds-green: #10B981;
    --ds-green-soft: rgba(16, 185, 129, 0.12);
    --ds-amber: #F59E0B;
    --ds-amber-soft: rgba(245, 158, 11, 0.12);
    --ds-rose: #F43F5E;
    --ds-rose-soft: rgba(244, 63, 94, 0.12);

    /* Surfaces — dark-first */
    --ds-bg: #070B17;
    --ds-bg-elevated: #0A0F1E;
    --ds-card: #0F172A;
    --ds-surface: #111827;
    --ds-surface-hover: #1A2332;
    --ds-border: rgba(148, 163, 184, 0.1);
    --ds-border-strong: rgba(148, 163, 184, 0.18);
    --ds-glass: rgba(15, 23, 42, 0.72);
    --ds-glass-border: rgba(255, 255, 255, 0.06);

    /* Text */
    --ds-text: #FFFFFF;
    --ds-text-secondary: #94A3B8;
    --ds-text-muted: #64748B;

    /* Effects — minimal */
    --ds-radius: 10px;
    --ds-radius-sm: 8px;
    --ds-radius-xs: 5px;
    --ds-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    --ds-shadow-glow: none;
    --ds-blur: blur(16px);
    --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ds-sidebar-w: 200px;

    /* Responsive breakpoints (reference values — use in custom media queries) */
    --bp-xs: 480px;
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 960px;
    --bp-xl: 1100px;
    --bp-2xl: 1280px;
}

/* Light theme overrides */
[data-theme="light"] {
    --ds-bg: #F1F5F9;
    --ds-bg-elevated: #FFFFFF;
    --ds-card: #FFFFFF;
    --ds-surface: #F8FAFC;
    --ds-surface-hover: #F1F5F9;
    --ds-border: #E2E8F0;
    --ds-border-strong: #CBD5E1;
    --ds-glass: rgba(255, 255, 255, 0.85);
    --ds-glass-border: rgba(0, 0, 0, 0.06);
    --ds-text: #0F172A;
    --ds-text-secondary: #475569;
    --ds-text-muted: #94A3B8;
    --ds-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    --ds-shadow-glow: 0 0 40px rgba(124, 58, 237, 0.08);
}

/* Cheerful theme — warm, vibrant, professional */
[data-theme="cheerful"] {
    color-scheme: light;
    --ds-purple: #FF6B6B;
    --ds-purple-hover: #F25555;
    --ds-purple-soft: rgba(255, 107, 107, 0.14);
    --ds-purple-glow: rgba(255, 107, 107, 0.28);
    --ds-blue: #3B82F6;
    --ds-blue-soft: rgba(59, 130, 246, 0.14);
    --ds-cyan: #22D3EE;
    --ds-cyan-soft: rgba(34, 211, 238, 0.14);
    --ds-green: #34D399;
    --ds-green-soft: rgba(52, 211, 153, 0.14);
    --ds-amber: #FBBF24;
    --ds-amber-soft: rgba(251, 191, 36, 0.16);
    --ds-rose: #FB7185;
    --ds-rose-soft: rgba(251, 113, 133, 0.14);
    --ds-bg: #FFF9F5;
    --ds-bg-elevated: #FFFFFF;
    --ds-card: #FFFFFF;
    --ds-surface: #FFF4EC;
    --ds-surface-hover: #FFEDE3;
    --ds-border: #FFE4D6;
    --ds-border-strong: #FFD0BC;
    --ds-glass: rgba(255, 255, 255, 0.88);
    --ds-glass-border: rgba(255, 107, 107, 0.08);
    --ds-text: #292524;
    --ds-text-secondary: #57534E;
    --ds-text-muted: #A8A29E;
    --ds-shadow: 0 4px 24px rgba(255, 107, 107, 0.08);
    --ds-shadow-glow: 0 0 48px rgba(251, 191, 36, 0.12);
    --ds-radius: 14px;
    --ds-radius-sm: 10px;
}