/* ============================================================ Digital Twin — Brand Design Tokens (Light + Dark) ------------------------------------------------------------ مصدر الحقيقة الوحيد لكل ألوان وخطوط الهوية البصرية. نظام مزدوج: القيم الافتراضية في :root هي وضع النهار، وتُستبدل تلقائياً عند وجود [data-theme="dark"] على . ألوان البراند الأساسية (Indigo/Emerald/Gold) ثابتة في الوضعين لأنها مقروءة بوضوح على خلفية فاتحة أو داكنة معاً. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&display=swap'); :root { /* ------------------ ألوان البراند الثابتة (كلا الوضعين) ------------------ */ --dt-color-primary: #5B5CEB; --dt-color-primary-hover: #4A4BD1; --dt-color-secondary: #10B981; --dt-color-secondary-hover: #0E9F6E; --dt-color-accent: #F9C74F; --dt-color-accent-hover: #F0B429; --dt-color-success: #22C55E; --dt-color-warning: #F59E0B; --dt-color-error: #EF4444; --dt-color-info: #3882F6; /* ------------------ وضع النهار (افتراضي) ------------------ */ --dt-bg: #F3F5F9; --dt-surface: #FFFFFF; --dt-surface-alt: #F8FAFC; --dt-text: #101828; --dt-text-muted: #64748B; --dt-border: #E5E9F0; --dt-primary-tint: #EEEEFD; --dt-secondary-tint: #E7F9F1; --dt-success-tint: #DCFCE7; --dt-warning-tint: #FEF3C7; --dt-error-tint: #FEE2E2; --dt-info-tint: #DBEAFE; --dt-sidebar-bg: #FFFFFF; --dt-sidebar-text: #55607A; --dt-sidebar-text-active: #101828; --dt-sidebar-border: #E5E9F0; --dt-sidebar-hover: #F3F5F9; --dt-surface-highlight: #EDF0F7; /* الحدّ المتوهّج الموحّد (Signature glow) — يُستخدم لكل عنصر "نشط/مفعّل" بالموقع: تبويب مفعّل، بطاقة عند المرور، مؤشر ثقة تصنيف AI... إلخ. لون واحد ثابت (Indigo) بدل التدرجات المتفرقة، ليصير "بصمة" بصرية موحّدة تتكرر بانضباط. */ --dt-glow-ring: 0 0 0 1px rgba(91, 92, 235, 0.35), 0 0 14px -2px rgba(91, 92, 235, 0.35); --dt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --dt-shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08); --dt-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12); /* ------------------ الخطوط ------------------ */ --dt-font-en: 'IBM Plex Sans', -apple-system, Segoe UI, Arial, sans-serif; --dt-font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', Tahoma, Arial, sans-serif; --dt-font-base: 'IBM Plex Sans Arabic', 'IBM Plex Sans', -apple-system, Segoe UI, Tahoma, Arial, sans-serif; --dt-radius-sm: 8px; --dt-radius-md: 14px; --dt-radius-lg: 20px; --dt-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* ------------------ وضع الليل ------------------ */ :root[data-theme='dark'] { --dt-bg: #0A0F1C; --dt-surface: #131B2E; --dt-surface-alt: #182338; /* مستوى إضاءة رابع — لمناطق التفاعل/التفعيل (hover على عناصر مرتفعة أصلاً) */ --dt-surface-highlight: #1F2C47; --dt-text: #E8ECF7; --dt-text-muted: #8B96B4; --dt-border: #232E48; --dt-primary-tint: rgba(91, 92, 235, 0.16); --dt-secondary-tint: rgba(16, 185, 129, 0.16); --dt-success-tint: rgba(34, 197, 94, 0.16); --dt-warning-tint: rgba(245, 158, 11, 0.18); --dt-error-tint: rgba(239, 68, 68, 0.16); --dt-info-tint: rgba(56, 130, 246, 0.18); --dt-sidebar-bg: #0A0F1C; --dt-sidebar-text: #8B96B4; --dt-sidebar-text-active: #FFFFFF; --dt-sidebar-border: #1B2438; --dt-sidebar-hover: #131B2E; --dt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --dt-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --dt-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); } /* يحترم تفضيل المستخدم بتقليل الحركة على مستوى النظام بالكامل */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }