/* ============================================================ Cards WiFi Zone — محرّك التوكنز (Design Tokens Engine) ------------------------------------------------------------ مصدر اللون الوحيد: config/theme.php، يُحقن كـ :root{--brand-*} عبر renderHook (لوحة الأدمن + الدخول) أو طباعة Blade (البوابة/الطباعة). ٣ طبقات: Layer 0 البذور → --brand-primary / --brand-secondary (محقونة من config) Layer 1 سلالم مشتقّة تلقائياً من البذور (ثابتة عبر الوضعين) Layer 2 توكنز دلالية (أسطح/نصوص/حدود) — قيمها تختلف بين النهاري والليلي الوضعان: • النهاري = قيم Layer 2 في :root (الافتراضي). • الليلي = قيم Layer 2 في .dark (يضيفها Filament على عند التبديل). المكوّنات تشير للتوكنز فقط، فالتبديل يقلب الواجهة كاملة دون تكرار قواعد. آلية الاشتقاق: color-mix(in oklab, البذرة, #fff/#000 n%) — مزج نحو الأبيض (تفتيح) أو الأسود (تغميق) بخطوات إدراكية. color-mix مدعوم في Chrome 111+ / Safari 16.2+ / Firefox 113+ (أوسع من oklch relative-color). والبذرة نفسها hex تعمل في أي مكان. ============================================================ */ :root { /* ── Layer 0 (احتياطي) ── القيم الفعلية تُحقن من config. */ --brand-primary: #6366F1; --brand-secondary: #38BDF8; /* ── Layer 1 — سلّم اللون الأساسي (مشتقّ من --brand-primary) ── */ --cwz-primary-50: color-mix(in oklab, var(--brand-primary), #fff 92%); --cwz-primary-100: color-mix(in oklab, var(--brand-primary), #fff 84%); --cwz-primary-200: color-mix(in oklab, var(--brand-primary), #fff 68%); --cwz-primary-300: color-mix(in oklab, var(--brand-primary), #fff 48%); --cwz-primary-400: color-mix(in oklab, var(--brand-primary), #fff 24%); --cwz-primary-500: var(--brand-primary); --cwz-primary-600: color-mix(in oklab, var(--brand-primary), #000 12%); --cwz-primary-700: color-mix(in oklab, var(--brand-primary), #000 26%); --cwz-primary-800: color-mix(in oklab, var(--brand-primary), #000 40%); --cwz-primary-900: color-mix(in oklab, var(--brand-primary), #000 54%); --cwz-primary-950: color-mix(in oklab, var(--brand-primary), #000 68%); /* ── Layer 1 — سلّم اللون الثانوي (مشتقّ من --brand-secondary) ── */ --cwz-secondary-50: color-mix(in oklab, var(--brand-secondary), #fff 92%); --cwz-secondary-100: color-mix(in oklab, var(--brand-secondary), #fff 84%); --cwz-secondary-200: color-mix(in oklab, var(--brand-secondary), #fff 68%); --cwz-secondary-300: color-mix(in oklab, var(--brand-secondary), #fff 48%); --cwz-secondary-400: color-mix(in oklab, var(--brand-secondary), #fff 24%); --cwz-secondary-500: var(--brand-secondary); --cwz-secondary-600: color-mix(in oklab, var(--brand-secondary), #000 12%); --cwz-secondary-700: color-mix(in oklab, var(--brand-secondary), #000 26%); --cwz-secondary-800: color-mix(in oklab, var(--brand-secondary), #000 40%); --cwz-secondary-900: color-mix(in oklab, var(--brand-secondary), #000 54%); --cwz-secondary-950: color-mix(in oklab, var(--brand-secondary), #000 68%); /* ── Layer 1 — مشتقّات تفاعلية + ألوان الحالة (ثابتة عبر الوضعين) ── */ --cwz-primary: var(--cwz-primary-500); --cwz-primary-strong: var(--cwz-primary-600); --cwz-primary-soft: color-mix(in srgb, var(--cwz-primary-500) 14%, transparent); --cwz-primary-ring: color-mix(in srgb, var(--cwz-primary-500) 45%, transparent); --cwz-on-primary: #FFFFFF; /* نص/أيقونات فوق الأسطح الأساسية الصلدة (ثابت عبر الوضعين) */ --cwz-accent: var(--cwz-primary-500); --cwz-accent-2: var(--cwz-secondary-500); --cwz-success: var(--brand-success, #22C55E); --cwz-warning: var(--brand-warning, #F59E0B); --cwz-danger: var(--brand-danger, #EF4444); --cwz-info: var(--brand-info, #38BDF8); --cwz-success-soft: color-mix(in srgb, var(--cwz-success) 14%, transparent); --cwz-warning-soft: color-mix(in srgb, var(--cwz-warning) 14%, transparent); --cwz-danger-soft: color-mix(in srgb, var(--cwz-danger) 14%, transparent); --cwz-info-soft: color-mix(in srgb, var(--cwz-info) 14%, transparent); /* ألوان الكارت المطبوع (ثابتة عبر الوضعين — تحاكي الورق): تطابق CardTemplates::socialStyle */ --cwz-paper: #FFFFFF; --cwz-print-card: #2196F3; /* ── توكنز غير لونية (ثابتة عبر الوضعين) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; /* مصدر واحد لاستدارة العناصر الصغيرة (أزرار/حقول/قوائم/جداول) — غيّره هنا فيسري على الكل */ --radius-sm: 5px; --radius: 12px; --radius-card: 14px; --radius-pill: 9999px; --cwz-sidebar-w: 15rem; /* ريل الأيقونات: عرض نحيف افتراضي + عرض موسّع عند التحويم/التثبيت */ --cwz-rail-w: 4.5rem; --cwz-rail-expanded: 16rem; /* ════════════════════════════════════════════════════════ Layer 2 — التوكنز الدلالية (الوضع النهاري — الافتراضي) بالتة فاتحة هادئة احترافية (أبيض/رمادي أزرق ناعم). ════════════════════════════════════════════════════════ */ --cwz-bg: #F5F7FA; /* خلفية التطبيق */ --cwz-surface: #FFFFFF; /* القائمة + الهيدر + اللوحات */ --cwz-surface-2: #F1F4F9; /* سطح أعلى (تحويم/حقول) */ --cwz-surface-top: #FFFFFF; /* أعلى تدرّج القائمة الجانبية */ --cwz-card: #FFFFFF; /* البطاقات والأقسام */ --cwz-card-hover: #F8FAFC; /* تحويم البطاقات */ --cwz-border: #E2E8F0; /* الحدود */ --cwz-border-soft: rgb(100 116 139 / 0.18); --cwz-ink: #1E293B; /* نص أساسي */ --cwz-ink-dim: #475569; /* نص ثانوي */ --cwz-ink-faint: #94A3B8; /* نص خافت/أيقونات خاملة */ --cwz-ink-strong: #0F172A; /* عناوين/عناصر نشطة (أعلى تباين) */ /* ألوان مرور الجلسة كنص (تنزيل/رفع) — درجات داكنة تحقّق تبايناً ≥4.5:1 على الأسطح الفاتحة. */ --cwz-download: #166534; --cwz-upload: #075985; /* تراكبات التحويم — داكنة شفّافة فوق الأسطح الفاتحة */ --cwz-hover: rgb(15 23 42 / 0.04); --cwz-hover-strong: rgb(15 23 42 / 0.07); /* تحويم أوضح (القائمة الجانبية) */ --cwz-hover-2: rgb(15 23 42 / 0.022); --cwz-sunken: rgb(15 23 42 / 0.03); /* منطقة غائرة خفيفة (عناصر فرعية) */ --cwz-inset: rgb(15 23 42 / 0.04); /* ظلال ناعمة رمادية (نهاري) */ --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06); --shadow: 0 4px 14px -6px rgb(15 23 42 / 0.12); --shadow-lg: 0 18px 50px -12px rgb(15 23 42 / 0.18); } /* ════════════════════════════════════════════════════════════ Layer 2 — التوكنز الدلالية (الوضع الليلي — يتجاوز النهاري) بالتة داكنة فاخرة (مستوحاة من Stripe/Linear). ════════════════════════════════════════════════════════════ */ .dark { --cwz-bg: #0B1220; --cwz-surface: #111827; --cwz-surface-2: #161E2E; --cwz-surface-top: #131C2C; --cwz-card: #1F2937; --cwz-card-hover: #232F3E; --cwz-border: #2B3648; --cwz-border-soft: rgb(43 54 72 / 0.6); --cwz-ink: #E5E7EB; --cwz-ink-dim: #9CA3AF; --cwz-ink-faint: #6B7280; --cwz-ink-strong: #FFFFFF; /* ألوان مرور الجلسة (ليلي) — درجات فاتحة تحقّق تبايناً عالياً على الأسطح الداكنة. */ --cwz-download: #4ADE80; --cwz-upload: #7DD3FC; /* تراكبات التحويم — فاتحة شفّافة فوق الأسطح الداكنة */ --cwz-hover: rgb(255 255 255 / 0.05); --cwz-hover-strong: rgb(255 255 255 / 0.09); /* تحويم أوضح (القائمة الجانبية) */ --cwz-hover-2: rgb(255 255 255 / 0.025); --cwz-sunken: rgb(0 0 0 / 0.16); /* منطقة غائرة خفيفة (عناصر فرعية) */ --cwz-inset: rgb(255 255 255 / 0.04); /* ظلال داكنة (لا أسود خام) */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35); --shadow: 0 4px 14px -6px rgb(0 0 0 / 0.5); --shadow-lg: 0 18px 50px -12px rgb(0 0 0 / 0.6); }