/* ═══════════════════════════════════════════════════════════
   Design Tokens — مشاورمالی
   منبع یگانه‌ی حقیقت برای همه رنگ‌ها، فاصله‌ها و سایه‌ها
   
   ⚠️ قاعده: هیچ فایل دیگه‌ای نباید رنگ هاردکد داشته باشه
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ═══════════════════════════════════════════════════════
       رنگ‌های برند
       ═══════════════════════════════════════════════════════ */
    
    /* Cyan (برند اصلی) */
    --brand-primary: #06B6D4;
    --brand-primary-dark: #0891B2;
    --brand-primary-light: #22D3EE;
    --brand-primary-50: #ECFEFF;
    --brand-primary-100: #CFFAFE;
    --brand-primary-200: #A5F3FC;
    
    /* Blue (مکمل) */
    --brand-secondary: #3B82F6;
    --brand-secondary-dark: #2563EB;
    --brand-secondary-light: #60A5FA;
    --brand-secondary-50: #EFF6FF;
    --brand-secondary-100: #DBEAFE;
    
    /* ═══════════════════════════════════════════════════════
       رنگ‌های معنایی
       ═══════════════════════════════════════════════════════ */
    
    /* موفقیت - سبز */
    --color-success: #10B981;
    --color-success-dark: #059669;
    --color-success-light: #34D399;
    --color-success-50: #D1FAE5;
    
    /* هشدار - طلایی */
    --color-warning: #FBBF24;
    --color-warning-dark: #F59E0B;
    --color-warning-light: #FCD34D;
    --color-warning-50: #FEF3C7;
    
    /* خطر - قرمز */
    --color-danger: #EF4444;
    --color-danger-dark: #DC2626;
    --color-danger-light: #F87171;
    --color-danger-50: #FEE2E2;
    
    /* اطلاعات - Cyan (همون primary) */
    --color-info: #06B6D4;
    --color-info-dark: #0891B2;
    --color-info-light: #22D3EE;
    --color-info-50: #ECFEFF;
    
    /* بنفش */
    --color-purple: #8B5CF6;
    --color-purple-dark: #7C3AED;
    --color-purple-light: #A78BFA;
    --color-purple-50: #EDE9FE;
    
    /* صورتی */
    --color-pink: #EC4899;
    --color-pink-dark: #DB2777;
    --color-pink-light: #F472B6;
    --color-pink-50: #FCE7F3;
    
    /* VIP - طلایی */
    --color-vip: #FBBF24;
    --color-vip-dark: #F59E0B;
    --color-vip-light: #FDE68A;
    
    /* ستاره (امتیاز) */
    --color-star: #FFD700;
    
    /* ═══════════════════════════════════════════════════════
       پس‌زمینه‌ها (تغییر با تم)
       ═══════════════════════════════════════════════════════ */
    --bg-page: #0A192F;
    --bg-surface: #112240;
    --bg-surface-hover: #1A2A47;
    --bg-elevated: #164E63;
    --bg-subtle: #0F2040;
    --bg-overlay: rgba(10, 25, 47, 0.85);
    --bg-hover: rgba(6, 182, 212, 0.06);
    --bg-active: rgba(6, 182, 212, 0.12);
    --bg-disabled: rgba(148, 163, 184, 0.15);
    
    /* ═══════════════════════════════════════════════════════
       متن‌ها
       ═══════════════════════════════════════════════════════ */
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-disabled: #64748B;
    --text-inverse: #0F172A;
    --text-link: #22D3EE;
    --text-link-hover: #67E8F9;
    
    /* ═══════════════════════════════════════════════════════
       حاشیه‌ها
       ═══════════════════════════════════════════════════════ */
    --border-subtle: rgba(203, 213, 225, 0.08);
    --border-default: rgba(203, 213, 225, 0.15);
    --border-strong: rgba(203, 213, 225, 0.25);
    --border-brand: rgba(6, 182, 212, 0.3);
    --border-brand-strong: rgba(6, 182, 212, 0.5);
    --border-success: rgba(16, 185, 129, 0.3);
    --border-warning: rgba(251, 191, 36, 0.3);
    --border-danger: rgba(239, 68, 68, 0.3);
    
    /* ═══════════════════════════════════════════════════════
       سایه‌ها
       ═══════════════════════════════════════════════════════ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.35);
    --shadow-glow-brand: 0 0 30px rgba(6, 182, 212, 0.3);
    --shadow-glow-accent: 0 0 30px rgba(251, 191, 36, 0.3);
    
    /* ═══════════════════════════════════════════════════════
       گرادیان‌ها
       ═══════════════════════════════════════════════════════ */
    --gradient-brand: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
    --gradient-brand-hover: linear-gradient(135deg, #0891B2 0%, #2563EB 100%);
    --gradient-brand-reverse: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
    --gradient-cyan: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    --gradient-blue: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    --gradient-danger: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    --gradient-vip: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    --gradient-hero: linear-gradient(135deg, #0A192F 0%, #164E63 100%);
    --gradient-card: linear-gradient(135deg, #0A192F 0%, #0F2040 100%);
    --gradient-cta: linear-gradient(135deg, #164E63 0%, #0A192F 50%, #112240 100%);
    
    /* ═══════════════════════════════════════════════════════
       فاصله‌ها
       ═══════════════════════════════════════════════════════ */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    
    /* ═══════════════════════════════════════════════════════
       شعاع گوشه‌ها
       ═══════════════════════════════════════════════════════ */
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;
    
    /* ═══════════════════════════════════════════════════════
       انیمیشن‌ها
       ═══════════════════════════════════════════════════════ */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s ease;
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ═══════════════════════════════════════════════════════
       تایپوگرافی
       ═══════════════════════════════════════════════════════ */
    --font-main: 'Shabnam', 'Vazirmatn', Tahoma, sans-serif;
    --font-mono: 'Courier New', 'Consolas', monospace;
    
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    --line-height-tight: 1.3;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.9;
    
    /* ═══════════════════════════════════════════════════════
       z-index
       ═══════════════════════════════════════════════════════ */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal-backdrop: 9000;
    --z-modal: 9100;
    --z-popover: 9200;
    --z-tooltip: 9300;
    --z-toast: 9400;
    
    /* ═══════════════════════════════════════════════════════
       Layout
       ═══════════════════════════════════════════════════════ */
    --container-max: 1280px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --header-height: 120px;
    --sidebar-width: 260px;
}


/* ═══════════════════════════════════════════════════════════
   Light Mode — فقط رنگ‌های پایه override می‌شن
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] {
    /* پس‌زمینه‌ها */
    --bg-page: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F1F5F9;
    --bg-elevated: #E2E8F0;
    --bg-subtle: #ECFEFF;
    --bg-overlay: rgba(255, 255, 255, 0.9);
    --bg-hover: rgba(6, 182, 212, 0.06);
    --bg-active: rgba(6, 182, 212, 0.12);
    --bg-disabled: rgba(100, 116, 139, 0.1);
    
    /* متن‌ها */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-disabled: #94A3B8;
    --text-inverse: #F8FAFC;
    --text-link: #0891B2;
    --text-link-hover: #06B6D4;
    
    /* حاشیه‌ها */
    --border-subtle: rgba(0, 0, 0, 0.05);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.15);
    --border-brand: rgba(6, 182, 212, 0.3);
    --border-brand-strong: rgba(6, 182, 212, 0.5);
    
    /* سایه‌ها */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.1);
    --shadow-glow-brand: 0 0 30px rgba(6, 182, 212, 0.15);
    --shadow-glow-accent: 0 0 30px rgba(251, 191, 36, 0.15);
    
    /* گرادیان‌ها */
    --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    --gradient-hero: linear-gradient(135deg, #0A192F 0%, #164E63 100%);
    --gradient-cta: linear-gradient(135deg, #0891B2 0%, #0A192F 100%);
}