/* ============================================================ حبكة — نظام التصميم | tokens.css مصدر الحقيقة الوحيد: كل لون وقياس وظل وحركة في المنتج يأتي من هذا الملف. لا قيم مكتوبة مباشرة خارجه. الهوية: هدوء محايد + زجاج ناعم (Calm Minimalism + Soft UI) ============================================================ */ /* ------------------------------------------------------------ الخطوط — عائلة ثمانية (Thmanyah) Sans: عناصر الواجهة | Serif Display: العناوين الكبيرة Serif Text: النصوص الطويلة ------------------------------------------------------------ */ @font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyahsans-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; } @font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyahsans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyahsans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyahsans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyahsans-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; } @font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyahserifdisplay-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; } @font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyahserifdisplay-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyahserifdisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyahserifdisplay-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyahserifdisplay-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; } @font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyahseriftext-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; } @font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyahseriftext-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyahseriftext-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyahseriftext-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Thmanyah Serif Text"; src: url("fonts/thmanyahseriftext-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; } :root { /* ---------------------------------------------------------- عائلات الخطوط ---------------------------------------------------------- */ --font-sans: "Thmanyah Sans", "Segoe UI", system-ui, sans-serif; --font-display: "Thmanyah Serif Display", "Thmanyah Sans", serif; --font-text: "Thmanyah Serif Text", "Thmanyah Sans", serif; /* سلّم أحجام الخط — مبني على 16px */ --text-xs: 12px; /* تسميات دقيقة، توثيق */ --text-sm: 14px; /* نص مساعد، شارات */ --text-base: 16px; /* نص الواجهة الأساسي */ --text-lg: 18px; /* نص بارز، أسطر طويلة */ --text-xl: 21px; /* عناوين فرعية */ --text-2xl: 26px; /* عناوين بطاقات وأقسام */ --text-3xl: 33px; /* عناوين صفحات */ --text-4xl: 42px; /* عناوين كبرى */ --text-5xl: 56px; /* عناوين العرض */ /* أوزان الخط */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 900; /* ارتفاعات الأسطر */ --leading-tight: 1.25; /* العناوين */ --leading-normal: 1.6; /* نص الواجهة */ --leading-relaxed: 1.9; /* القراءة الطويلة */ /* تباعد الأحرف للعناوين الكبيرة */ --tracking-tight: -0.01em; --tracking-normal: 0; /* ---------------------------------------------------------- الألوان — الوضع الفاتح محايدة دافئة بالكامل؛ الأسود نفسه هو لون الهوية ---------------------------------------------------------- */ /* الخلفية والأسطح */ --bg: #F1F0ED; /* الخلفية العامة: رمادي دافئ فاتح جداً */ --surface-1: #FFFFFF; /* البطاقات واللوحات الطافية */ --surface-2: #F8F7F5; /* أسطح ثانوية، خلفيات الحقول */ --surface-3: #E9E7E3; /* أسطح غائرة، hover، فواصل بالدرجة */ --surface-4: #E0DED9; /* أغمق درجة — حالة الضغط للعناصر الشبحية */ --paper: #FFFFFF; /* ورقة السيناريو */ /* تدرج خلفية الصفحة — إشعاعي ناعم جداً: أفتح قليلاً أعلى الوسط، يغمق بالكاد عند الأطراف */ --bg-gradient: radial-gradient(140% 100% at 50% 18%, #F4F3F0 0%, #F1F0ED 55%, #ECEAE6 100%); /* @kind color */ /* النص */ --text-primary: #1C1A17; /* أسود دافئ قوي */ --text-secondary: #5D5A54; /* Parity 2026-07-27: قيمة المرجع الحرفيّة (contrast ≈2.65:1 مقابل bg الفاتح). تسجيل فقط: WCAG AA للنص الصغير يتطلّب ≥4.5:1؛ الاستعمال (مسودة/وسوم/تلميح/هدف) نصوص ثانويّة غير حاسمة. القرار: الالتزام بالمرجع. */ --text-muted: #98948B; --text-inverse: #FFFFFF; /* نص فوق الأسطح الداكنة */ /* الفعل الأساسي — الأسود هو الهوية (ينقلب في الداكن) */ --action-bg: #1C1A17; --action-bg-hover: #34312C; --action-fg: #FFFFFF; /* حدود — للضرورة القصوى فقط */ --border-subtle: rgba(28, 26, 23, 0.07); --border-strong: rgba(28, 26, 23, 0.14); --border-width: 1px; /* حلقة التركيز (focus) */ --focus-ring: 0 0 0 4px rgba(28, 26, 23, 0.08); /* ---------------------------------------------------------- الحالات الوظيفية — درجات هادئة مخففة لكل حالة: لون نص/أيقونة + خلفية ناعمة ---------------------------------------------------------- */ --success-fg: #3F7155; --success-bg: #E6EFE9; --warning-fg: #8F6A1F; --warning-bg: #F5EDDB; --danger-fg: #A04A41; --danger-bg: #F6E8E5; --info-fg: #46688A; --info-bg: #E6EDF4; /* ---------------------------------------------------------- وسوم المشاهد — 8 ألوان ناعمة متناغمة ---------------------------------------------------------- */ --tag-1-fg: #8A6A3B; --tag-1-bg: #F1E8DA; /* رملي */ --tag-2-fg: #6E7240; --tag-2-bg: #ECEDDC; /* زيتوني */ --tag-3-fg: #47715B; --tag-3-bg: #E2EEE6; /* مريمي */ --tag-4-fg: #3F7077; --tag-4-bg: #DFEDEE; /* بحري */ --tag-5-fg: #4A6890; --tag-5-bg: #E3EBF5; /* ضبابي */ --tag-6-fg: #6D5E92; --tag-6-bg: #EAE6F3; /* خزامى */ --tag-7-fg: #94506B; --tag-7-bg: #F4E5EC; /* وردي */ --tag-8-fg: #9A5A40; --tag-8-bg: #F4E7DF; /* طيني */ /* تدرجات الـ banner — العمق من التدرج لا الصراخ (تشبّع متوسط). الحالة الافتراضية عند غياب صورة غلاف يرفعها المستخدم */ --tag-1-banner: linear-gradient(135deg, #8A6A3B 0%, #B3905C 100%); /* @kind color */ --tag-2-banner: linear-gradient(135deg, #6E7240 0%, #969A63 100%); /* @kind color */ --tag-3-banner: linear-gradient(135deg, #47715B 0%, #6E9A82 100%); /* @kind color */ --tag-4-banner: linear-gradient(135deg, #3F7077 0%, #659BA2 100%); /* @kind color */ --tag-5-banner: linear-gradient(135deg, #4A6890 0%, #7392BA 100%); /* @kind color */ --tag-6-banner: linear-gradient(135deg, #6D5E92 0%, #9587BC 100%); /* @kind color */ --tag-7-banner: linear-gradient(135deg, #94506B 0%, #BC7795 100%); /* @kind color */ --tag-8-banner: linear-gradient(135deg, #9A5A40 0%, #C28266 100%); /* @kind color */ --banner-fg: #FFFFFF; /* نص وأيقونات فوق التدرج */ --banner-chip-bg: rgba(255, 255, 255, 0.22); /* رقاقة زجاجية خفيفة فوق التدرج — بلا blur */ --banner-deco-opacity: 0.14; /* @kind other */ /* شفافية الأيقونة الزخرفية المكبّرة */ /* نمط «هامس ← يكتمل»: الحالة الساكنة مخففة التشبع، وتكتمل عند hover فقط. سيطبق لاحقاً على صور الأغلفة بنفس القيم */ --banner-calm-saturate: 0.25; /* @kind other */ --banner-calm-brightness: 1.08; /* @kind other */ /* ---------------------------------------------------------- الزجاج الناعم (Soft Glass) ---------------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.68); --glass-bg-heavy: rgba(255, 255, 255, 0.88); --glass-border: rgba(255, 255, 255, 0.55); --glass-blur: blur(24px) saturate(1.4); /* @kind other */ --scrim: rgba(28, 26, 23, 0.28); /* خلف النوافذ المنبثقة */ /* ---------------------------------------------------------- الظلال — ناعمة منتشرة متعددة الطبقات (روح الهوية) ---------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(28, 26, 23, 0.03), 0 2px 10px rgba(28, 26, 23, 0.04); --shadow-2: 0 2px 4px rgba(28, 26, 23, 0.03), 0 10px 28px rgba(28, 26, 23, 0.07); --shadow-3: 0 4px 10px rgba(28, 26, 23, 0.04), 0 22px 56px rgba(28, 26, 23, 0.11); --shadow-4: 0 8px 18px rgba(28, 26, 23, 0.05), 0 40px 96px rgba(28, 26, 23, 0.16); /* ---------------------------------------------------------- طبقات الضوء — توهج داخلي علوي + لمعة سطح (sheen) قاعدة صارمة: • البطاقات الساكنة (بطاقات، لوحات، جداول): sheen + surface-highlight + ظل — ممنوع backdrop-blur (للأداء) • العناصر الطافية فقط (toast، قوائم منسدلة، modal، أشرطة عائمة): الزجاج الكامل (شفافية + blur + highlight) • الأزرار: الأساسي highlight معكوس خافت، الثانوي والخطر sheen + highlight مثل البطاقات، الشبحي والمعطّل بلا معالجة ---------------------------------------------------------- */ --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85); /* @kind shadow */ --surface-sheen: linear-gradient(180deg, #FFFFFF 0%, #FBFAF8 100%); /* @kind color */ --danger-sheen: linear-gradient(180deg, #F9ECE9 0%, #F3E4E1 100%); /* @kind color */ --action-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12); /* @kind shadow */ --action-highlight-hover: inset 0 1px 0 rgba(255, 255, 255, 0.22); /* @kind shadow */ /* الزر الأساسي كـ«جسم مضيء من الداخل» — جرافيت مصقول، تدرج ثلاثي ينزلق عند المرور */ --primary-gradient: linear-gradient(135deg, #1C1A17 0%, #38342E 50%, #1C1A17 100%); /* @kind color */ --primary-inner-glow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -2px 4px rgba(0, 0, 0, 0.35); /* @kind shadow */ --primary-outer-glow: 0 0 24px rgba(255, 255, 255, 0.06); /* @kind shadow */ /* ---------------------------------------------------------- المسافات — أساس 4px، سخية ---------------------------------------------------------- */ --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; --space-24: 96px; /* ---------------------------------------------------------- الزوايا ---------------------------------------------------------- */ --radius-sm: 8px; /* وسوم، شارات صغيرة */ --radius-md: 10px; /* أزرار صغيرة */ --radius-lg: 12px; /* أزرار، حقول */ --radius-xl: 16px; /* لوحات صغيرة */ --radius-2xl: 20px; /* بطاقات */ --radius-3xl: 24px; /* بطاقات كبيرة، نوافذ */ --radius-full: 999px; /* pill */ /* ---------------------------------------------------------- الحركة — هادئة وناعمة ---------------------------------------------------------- */ --duration-fast: 140ms; /* @kind other */ --duration-base: 240ms; /* @kind other */ --duration-slow: 420ms; /* @kind other */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ /* ---------------------------------------------------------- قياسات مساعدة ---------------------------------------------------------- */ --container: 1040px; /* أقصى عرض للمحتوى */ --measure: 64ch; /* أقصى عرض لسطر القراءة */ --control-height: 44px; /* ارتفاع الأزرار والحقول */ --control-height-sm: 36px; --icon-size: 20px; --avatar-size: 32px; --opacity-disabled: 0.45; /* @kind other */ /* شفافية العناصر المعطّلة */ } /* ============================================================ الوضع الداكن — أسود دافئ هادئ، نفس الفلسفة منقولة لليل ============================================================ */ [data-theme="dark"] { /* الخلفية والأسطح */ --bg: #171614; --surface-1: #201F1C; --surface-2: #262521; --surface-3: #2E2C28; --surface-4: #353330; /* حالة الضغط للعناصر الشبحية */ --paper: #21201D; /* الورقة: أفتح بدرجة من الخلفية، ليست بيضاء أبداً */ /* تدرج خلفية الصفحة */ --bg-gradient: radial-gradient(140% 100% at 50% 18%, #1A1916 0%, #171614 55%, #131210 100%); /* @kind color */ /* النص */ --text-primary: #EDEBE6; --text-secondary: #A7A39A; /* Parity 2026-07-27: قيمة المرجع الحرفيّة (contrast 3.11–3.41:1 مقابل bg الداكن). تسجيل فقط: WCAG AA للنص الصغير يتطلّب ≥4.5:1؛ نصوص ثانويّة غير حاسمة. */ --text-muted: #6F6B63; --text-inverse: #1C1A17; /* الفعل الأساسي ينقلب: فاتح بنص داكن */ --action-bg: #EDEBE6; --action-bg-hover: #FFFFFF; --action-fg: #1C1A17; /* حدود */ --border-subtle: rgba(237, 235, 230, 0.07); --border-strong: rgba(237, 235, 230, 0.14); /* حلقة التركيز */ --focus-ring: 0 0 0 4px rgba(237, 235, 230, 0.10); /* الحالات الوظيفية */ --success-fg: #8FBA9F; --success-bg: rgba(143, 186, 159, 0.13); --warning-fg: #CFA85C; --warning-bg: rgba(207, 168, 92, 0.13); --danger-fg: #C98A80; --danger-bg: rgba(201, 138, 128, 0.13); --info-fg: #8AABC9; --info-bg: rgba(138, 171, 201, 0.13); /* وسوم المشاهد */ --tag-1-fg: #C8A876; --tag-1-bg: rgba(200, 168, 118, 0.14); --tag-2-fg: #AEB37B; --tag-2-bg: rgba(174, 179, 123, 0.14); --tag-3-fg: #87B59C; --tag-3-bg: rgba(135, 181, 156, 0.14); --tag-4-fg: #7FB3BA; --tag-4-bg: rgba(127, 179, 186, 0.14); --tag-5-fg: #8AA7CF; --tag-5-bg: rgba(138, 167, 207, 0.14); --tag-6-fg: #AB9DD1; --tag-6-bg: rgba(171, 157, 209, 0.14); --tag-7-fg: #CE93AE; --tag-7-bg: rgba(206, 147, 174, 0.14); --tag-8-fg: #C9907A; --tag-8-bg: rgba(201, 144, 122, 0.14); /* تدرجات الـ banner — أعمق وأخفت: توهج خافت يخرج من العتمة */ --tag-1-banner: linear-gradient(135deg, #2A2318 0%, #5C4A2C 100%); /* @kind color */ --tag-2-banner: linear-gradient(135deg, #23251A 0%, #4C4F2E 100%); /* @kind color */ --tag-3-banner: linear-gradient(135deg, #1B2620 0%, #355244 100%); /* @kind color */ --tag-4-banner: linear-gradient(135deg, #1A2628 0%, #2F545A 100%); /* @kind color */ --tag-5-banner: linear-gradient(135deg, #1C222C 0%, #364D6B 100%); /* @kind color */ --tag-6-banner: linear-gradient(135deg, #221F2C 0%, #4D4268 100%); /* @kind color */ --tag-7-banner: linear-gradient(135deg, #2A1D23 0%, #6B3A4E 100%); /* @kind color */ --tag-8-banner: linear-gradient(135deg, #281E19 0%, #6B4030 100%); /* @kind color */ --banner-fg: #EDEBE6; --banner-chip-bg: rgba(255, 255, 255, 0.10); --banner-deco-opacity: 0.12; /* @kind other */ --banner-calm-saturate: 0.35; /* @kind other */ --banner-calm-brightness: 0.82; /* @kind other */ /* الزجاج */ --glass-bg: rgba(32, 31, 28, 0.72); --glass-bg-heavy: rgba(32, 31, 28, 0.90); --glass-border: rgba(237, 235, 230, 0.08); --scrim: rgba(10, 9, 8, 0.55); /* الظلال — أعمق قليلاً لكن ما تزال ناعمة */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.18); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.18), 0 10px 28px rgba(0, 0, 0, 0.26); --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.20), 0 22px 56px rgba(0, 0, 0, 0.34); --shadow-4: 0 8px 18px rgba(0, 0, 0, 0.22), 0 40px 96px rgba(0, 0, 0, 0.44); /* طبقات الضوء */ --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* @kind shadow */ --surface-sheen: linear-gradient(180deg, #232220 0%, #1E1D1A 100%); /* @kind color */ --danger-sheen: linear-gradient(180deg, rgba(201, 138, 128, 0.17) 0%, rgba(201, 138, 128, 0.11) 100%); /* @kind color */ --action-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55); /* @kind shadow */ --action-highlight-hover: inset 0 1px 0 rgba(255, 255, 255, 0.85); /* @kind shadow */ /* الزر الأساسي الفاتح في الداكن — نفس منطق «الجسم المضيء» بدرجات الزر الفاتح */ --primary-gradient: linear-gradient(135deg, #E4E1DB 0%, #FFFFFF 50%, #E4E1DB 100%); /* @kind color */ --primary-inner-glow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.12); /* @kind shadow */ --primary-outer-glow: 0 0 24px rgba(255, 255, 255, 0.10); /* @kind shadow */ }