/* ══════════════════════════════════════════════════════════════ نظام الألوان — سطحان (الموقع التعريفي / المنصة) × مظهران (فاتح / داكن) يُضبط على عبر data-surface و data-theme. الأسماء دلالية لا لونية: brand-fill هو «لون التعبئة الأساسي» لا «الكحلي»، لأن قيمته تختلف بين المظهرين. هذا ما يجعل التبديل ممكناً دون إعادة كتابة كل نمط في الصفحات. ══════════════════════════════════════════════════════════════ */ /* ─────────── الموقع التعريفي — فاتح (ألوان التصميم الأصلية) ─────────── */ :root, [data-surface="marketing"][data-theme="light"] { --navy: #062443; --navy2: #0F355E; --green: #017133; --success: #0D8A4F; --bg: #F7F9FB; --surface: #FFFFFF; --raised: #EEF3F8; --text: #13253A; --muted: #6B7B8C; --border: #E2E9F0; --infobg: #E9F1F8; --info-fg: #0F355E; --heading: #062443; --brand-fill: #062443; --on-brand: #FFFFFF; --cta: #017133; --cta-hover: #0D8A4F; --on-cta: #FFFFFF; --hero-from: #041a33; --hero-via: #062443; --hero-to: #0b3157; --hero-text: #FFFFFF; --hero-muted:#b7c6d6; --hero-accent:#3ecf82; --footer-bg: #062443; --footer-fg: #FFFFFF; --card-shadow: 0 4px 12px rgba(6,36,67,.05); --card-shadow-lg:0 18px 40px rgba(6,36,67,.13); --float-shadow: 0 12px 30px rgba(4,20,40,.35); --card-hover-border: #c6d6e4; --error-bg: #FEF2F2; --error-border: #FCA5A5; --error-fg: #991B1B; } /* ─────────── الموقع التعريفي — داكن ─────────── */ /* يستعير هوية المنصة الداكنة ليبقى البراند واحداً في المظهرين. */ [data-surface="marketing"][data-theme="dark"] { --navy: #7fb4e8; --navy2: #5eead4; --green: #2dd4bf; --success: #5eead4; --bg: #0A1628; --surface: #0f1f36; --raised: #132743; --text: #e8f0f5; --muted: #8fa3b8; --border: #1b2c44; --infobg: #132743; --info-fg: #9fd8e8; --heading: #e8f0f5; --brand-fill: #2dd4bf; --on-brand: #06101f; --cta: #2dd4bf; --cta-hover: #5eead4; --on-cta: #06101f; --hero-from: #061426; --hero-via: #0a1e34; --hero-to: #10314b; --hero-text: #e8f0f5; --hero-muted:#8fa3b8; --hero-accent:#5eead4; --footer-bg: #0f1f36; --footer-fg: #e8f0f5; --card-shadow: 0 4px 12px rgba(0,0,0,.3); --card-shadow-lg:0 18px 40px rgba(0,0,0,.45); --float-shadow: 0 12px 30px rgba(0,0,0,.5); --card-hover-border: #2a4a6b; --error-bg: rgba(248,113,113,.12); --error-border: rgba(248,113,113,.45); --error-fg: #fca5a5; } /* ─────────── المنصة ولوحة التحكم — داكن (ألوان التصميم الأصلية) ─────────── */ [data-surface="app"][data-theme="dark"], .theme-dark { --accent: #2dd4bf; --accent-lite: #5eead4; --accent-deep: #0e7490; --on-accent: #06101f; --bg: #0A1628; --surface: #0f1f36; --raised: #132743; --raised2: #16304f; --border: #1b2c44; --text: #e8f0f5; --muted: #8fa3b8; --faint: #46607a; --amber: #f59e0b; --ph1: #0a1830; --ph2: #0c1b36; --ph3: #10233f; --ph4: #122946; --danger: #f87171; --danger-bg: rgba(248,113,113,.16); --shadow-lg: 0 14px 34px rgba(0,0,0,.4); --overlay: rgba(3,10,20,.62); } /* ─────────── المنصة ولوحة التحكم — فاتح ─────────── */ /* الأخضر المائل يُغمَّق حتى يبقى التباين مقبولاً على الأبيض. */ [data-surface="app"][data-theme="light"] { --accent: #0E7490; --accent-lite: #0891B2; --accent-deep: #155E75; --on-accent: #FFFFFF; --bg: #F4F7FA; --surface: #FFFFFF; --raised: #EDF2F7; --raised2: #DFE8F1; --border: #DCE5EE; --text: #13253A; --muted: #5F7183; --faint: #8698A9; --amber: #B45309; --ph1: #EEF3F8; --ph2: #E4ECF4; --ph3: #E9F0F6; --ph4: #DFE8F1; --danger: #DC2626; --danger-bg: rgba(220,38,38,.10); --shadow-lg: 0 14px 34px rgba(19,37,58,.14); --overlay: rgba(19,37,58,.42); } /* ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); } body { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; direction: rtl; color: var(--text); -webkit-font-smoothing: antialiased; /* التبديل بين المظهرين يجب أن يبدو مقصوداً لا وميضاً */ transition: background-color .25s ease, color .25s ease; } a { color: var(--cta, var(--accent)); text-decoration: none; } /* ── الأرقام داخل نص عربي ── خوارزمية الاتجاه ثنائي الاتجاه تعيد ترتيب «12:30» و«+120 نقطة» و«85٪» حين تُكتب داخل فقرة عربية. العزل يمنع ذلك. */ .num { direction: ltr; unicode-bidi: isolate; } .num-g { direction: ltr; unicode-bidi: isolate; font-family: 'Space Grotesk', 'IBM Plex Sans Arabic', monospace; } /* ── زر تبديل المظهر ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; transition: background-color .18s, color .18s, border-color .18s; } .theme-toggle:hover { color: var(--text); background: var(--raised, var(--infobg)); } /* ── إتاحة الوصول ── */ :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--cta, var(--accent)); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ══════════════════════════════════════════════════════════════ الشاشات الصغيرة واللمسية ══════════════════════════════════════════════════════════════ */ /* سفاري على الآيفون يكبّر الصفحة عند التركيز على حقل خطّه أصغر من 16px، ولا يعيدها بعد الخروج من الحقل. مقاسات الحقول موزّعة inline في التصميم، فلا يكفي محدِّد عادي لتجاوزها — ولذلك !important هنا. */ /* المُستثنيات مسلسلة لا مجموعة داخل :not() الواحدة: صيغة القائمة تحتاج سفاري 16.4، وقائمة محدِّدات فيها واحد غير صالح تُسقط القاعدة كلها — أي أن الأجهزة المقصودة بالإصلاح هي أول من يفقده. */ @media (max-width: 900px), (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select, .rich-area { font-size: 16px !important; } } /* الحد الأدنى لهدف اللمس 44×44. مقصور على الأجهزة اللمسية حتى تبقى كثافة تخطيط سطح المكتب كما صُمّمت. */ @media (pointer: coarse) { .theme-toggle { width: 44px; height: 44px; } }