/* ════════════════════════════════════════════════════════════════ قصر اليمن — رموز التصميم المشتركة (Design Tokens) المصدر البصري: notes/old theme/yemen-palace-admin-standalone.html التوثيق: notes/DESIGN-SYSTEM.md ← اقرأه قبل الاستهلاك أو التعديل عقد الاستخدام: • كل متغيّر هنا يبدأ بـ --yp- حصرًا. السبب: التطبيقات تعرّف متغيرات محلية بأسماء متصادمة (--gold-1 في المنيو = الأفتح، وفي مرجع الأدمن --gold-3 = الأفتح). البادئة تمنع التسميم الصامت أثناء الترحيل. • تدرّج الذهبي بمقياس إضاءة صريح: 100 = الأفتح ← 700 = الأغمق. • الثيم عبر data-yp-theme="dark|light" على . غياب السمة = داكن (المزاج الأساس للهوية؛ النادل داكن دائمًا بلا سكربت). كل تطبيق يحتفظ بمفتاح تخزينه الخاص (yp-theme للمنيو، yp-admin-theme للأدمن) ويترجمه إلى هذه السمة في سكربت التهيئة المبكر. • ممنوع وضع قيمة خام في CSS تطبيق إذا كان لها رمز هنا. ════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────── ١ — ثوابت العلامة (لا تتغيّر بين الثيمين) ──────────────────────────────────────────── */ :root { /* الخطوط — عائلة واحدة موحّدة لكل التطبيقات: Cairo (بديل مجاني هندسي قريب جدًا من DIN Next Arabic بصريًا، ويغطي العربية واللاتينية معًا). ثلاثة الأسماء أدناه أُبقيت لتفادي تغيير كل استهلاك في الشاشات — الثلاثة تُشير الآن لنفس العائلة. */ --yp-font-display: "Cairo", system-ui, sans-serif; --yp-font-body: "Cairo", system-ui, sans-serif; --yp-font-ar: "Cairo", system-ui, sans-serif; /* مقياس الطباعة — الحد الأدنى للنص المعلوماتي 12px (قرار مقفل 4/٢) */ --yp-text-xs: 0.75rem; /* 12px — بيانات وصفية فقط */ --yp-text-sm: 0.8125rem; /* 13px — ثانوي */ --yp-text-base: 0.9375rem;/* 15px — أساسي */ --yp-text-lg: 1.0625rem; /* 17px */ --yp-text-xl: 1.25rem; /* 20px — عناوين أقسام */ --yp-text-2xl: 1.5rem; /* 24px */ --yp-text-3xl: 2rem; /* 32px — عناوين صفحات */ /* نصف القطر — نفس سلّم المرجع */ --yp-radius-sm: 10px; --yp-radius-md: 13px; --yp-radius-lg: 18px; --yp-radius-xl: 24px; --yp-radius-pill: 999px; /* التباعد — مضاعفات 4 */ --yp-space-1: 4px; --yp-space-2: 8px; --yp-space-3: 12px; --yp-space-4: 16px; --yp-space-5: 20px; --yp-space-6: 24px; --yp-space-8: 32px; --yp-space-10: 40px; /* أهداف اللمس (قرار مقفل 4/١) */ --yp-touch-sm: 44px; --yp-touch-md: 48px; --yp-touch-lg: 52px; /* الحركة — إيقاع المرجع: دخول سريع بتباطؤ ناعم، رفع خفيف عند المرور */ --yp-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); /* fadeUp / الانزلاقات */ --yp-ease-spring: cubic-bezier(0.2, 0.8, 0.3, 1); /* الألواح والأدراج */ --yp-ease-pop: cubic-bezier(0.3, 1.4, 0.5, 1); /* عناصر صغيرة (نقاط الحرارة) */ --yp-dur-fast: 0.18s; --yp-dur-base: 0.25s; --yp-dur-slow: 0.4s; --yp-lift-hover: -5px; /* رفع البطاقات عند المرور */ --yp-lift-hover-sm: -2px; /* رفع الرقائق/الأزرار الصغيرة */ /* طبقات z موحّدة */ --yp-z-sticky: 20; --yp-z-topbar: 40; --yp-z-sidebar: 60; --yp-z-drawer: 75; --yp-z-modal: 100; --yp-z-toast: 120; } /* ──────────────────────────────────────────── ٢ — الثيم الداكن (الأساس — يسري بغياب السمة) ──────────────────────────────────────────── */ :root, html[data-yp-theme="dark"] { /* الخلفيات — بُن محمّص متدرّج */ --yp-bg-0: #120804; --yp-bg-1: #1B0D06; --yp-bg-2: #241108; /* الذهبي — 100 الأفتح ← 700 الأغمق */ --yp-gold-100: #F2D38E; --yp-gold-300: #E2B055; --yp-gold-500: #D89B3A; --yp-gold-700: #A06A1F; /* قناة rgb للشفافيات المتغيرة: rgb(var(--yp-gold-rgb) / .2) */ --yp-gold-rgb: 216 164 90; /* النصوص */ --yp-text-0: #FFFFFF; /* عناوين */ --yp-text-1: #E8DCCB; /* أساسي */ --yp-text-2: #CDB89B; /* ثانوي — ≈٩:١ على bg-0 */ /* لهجات مساندة */ --yp-ember: #C9691F; /* جمر — تحذير/حرارة */ --yp-leaf: #A8BD7E; /* ورق — نجاح/جاهز */ /* الأسطح الزجاجية — تُستخدم كـ background كاملة. دافئة كهرمانية لا رمادية، وشفافية تكفي لظهور نقشة المشربية خلفها بنعومة دون أن تُضعف قراءة النص فوقها. */ --yp-glass: linear-gradient(165deg, rgba(48, 25, 11, 0.72), rgba(26, 13, 6, 0.58)); --yp-glass-soft: linear-gradient(165deg, rgba(243, 214, 160, 0.07), rgba(243, 214, 160, 0.02)); --yp-glass-blur: blur(20px) saturate(1.25); /* الحدود */ --yp-line: rgba(216, 164, 90, 0.22); --yp-line-soft: rgba(216, 164, 90, 0.12); --yp-line-strong: rgba(216, 164, 90, 0.4); /* الظلال والتوهّج */ --yp-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); --yp-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.4); --yp-glow-gold: 0 0 0 3px rgba(216, 164, 90, 0.16), 0 0 24px rgba(216, 164, 90, 0.18); --yp-inner-light: inset 0 1px 0 rgba(243, 214, 160, 0.10); /* غلالة تعتيم (خلف الحوارات/الألواح) */ --yp-scrim: rgba(10, 4, 2, 0.72); /* حالات دلالية — لون + خلفية + حد لكل حالة */ --yp-ok: var(--yp-leaf); --yp-ok-bg: rgba(168, 189, 126, 0.14); --yp-ok-bd: rgba(168, 189, 126, 0.45); --yp-warn: var(--yp-gold-500); --yp-warn-bg: rgba(216, 164, 90, 0.14); --yp-warn-bd: rgba(216, 164, 90, 0.42); --yp-danger: #E2734B; /* أفتح من ember للنص الصغير على الداكن */ --yp-danger-bg: rgba(201, 105, 31, 0.13); --yp-danger-bd: rgba(201, 105, 31, 0.45); --yp-muted-bg: rgba(232, 220, 203, 0.05); --yp-muted-bd: rgba(232, 220, 203, 0.14); /* نص فوق تعبئة ذهبية (أزرار/حبوب الأسعار) */ --yp-on-gold: #2A1505; /* نقشة المشربية — نفس صورة assets/pattern.webp المستخدمة في تطبيقي الويتر والمنيو (لا تجعّم نجمة SVG مستقلة). شفافية لا تتجاوز 6%. */ --yp-pattern: url("/assets/pattern.webp"); --yp-pattern-opacity: 0.045; /* توهّجات خلفية الصفحة (radial) — تُركَّب فوق تدرّج bg */ --yp-page-glow-1: radial-gradient(1300px 700px at 8% -12%, rgba(216, 164, 90, 0.13), transparent 58%); --yp-page-glow-2: radial-gradient(1000px 800px at 108% 112%, rgba(120, 55, 18, 0.22), transparent 55%); } /* ──────────────────────────────────────────── ٣ — الثيم الفاتح (كريمي/ذهبي ملكي — ليس أبيض) ──────────────────────────────────────────── */ html[data-yp-theme="light"] { --yp-bg-0: #EFE3CB; --yp-bg-1: #F5EDDA; --yp-bg-2: #FAF5E8; /* الذهبي يُعتَّم للفاتح حفاظًا على التباين فوق الكريمي */ --yp-gold-100: #DFAF3A; --yp-gold-300: #C9691F; --yp-gold-500: #B5731F; --yp-gold-700: #8F5512; --yp-gold-rgb: 181 115 31; --yp-text-0: #3F2310; --yp-text-1: #5F3219; --yp-text-2: #7A5638; /* أغمق من مرجع 8C6A4A — رفع تباين النص الصغير فوق AA */ --yp-ember: #B85718; --yp-leaf: #6E7A45; /* أغمق من المرجع لتباين النص فوق الكريمي */ /* كريمي/بيج زجاجي — لا أبيض فاقع. الشفافية أعلى من قبل عمدًا حتى يُحسّ الزجاج فعلًا بدل أن يبدو سطحًا مصمتًا. */ --yp-glass: linear-gradient(165deg, rgba(253, 246, 232, 0.74), rgba(245, 234, 212, 0.62)); --yp-glass-soft: linear-gradient(165deg, rgba(143, 85, 18, 0.055), rgba(143, 85, 18, 0.018)); --yp-glass-blur: blur(20px) saturate(1.25); --yp-line: rgba(143, 85, 18, 0.34); --yp-line-soft: rgba(143, 85, 18, 0.17); --yp-line-strong: rgba(143, 85, 18, 0.5); --yp-shadow: 0 18px 44px rgba(95, 50, 25, 0.15); --yp-shadow-sm: 0 8px 20px rgba(95, 50, 25, 0.12); --yp-glow-gold: 0 0 0 3px rgba(181, 115, 31, 0.16), 0 0 22px rgba(181, 115, 31, 0.14); --yp-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.85); --yp-scrim: rgba(63, 35, 16, 0.45); --yp-ok: var(--yp-leaf); --yp-ok-bg: rgba(126, 138, 79, 0.14); --yp-ok-bd: rgba(126, 138, 79, 0.4); --yp-warn: #8F5512; --yp-warn-bg: rgba(181, 115, 31, 0.14); --yp-warn-bd: rgba(181, 115, 31, 0.4); --yp-danger: #8C3F17; --yp-danger-bg: rgba(184, 87, 24, 0.13); --yp-danger-bd: rgba(184, 87, 24, 0.4); --yp-muted-bg: rgba(63, 35, 16, 0.05); --yp-muted-bd: rgba(63, 35, 16, 0.16); --yp-on-gold: #FFFDF6; --yp-pattern: url("/assets/pattern.webp"); --yp-pattern-opacity: 0.06; --yp-page-glow-1: radial-gradient(1300px 700px at 8% -12%, rgba(223, 175, 58, 0.18), transparent 58%); --yp-page-glow-2: radial-gradient(1000px 800px at 108% 112%, rgba(201, 105, 31, 0.12), transparent 55%); } /* ──────────────────────────────────────────── ٤ — تدرّجات مركّبة جاهزة (تُشتق من الرموز أعلاه) ──────────────────────────────────────────── */ :root, html[data-yp-theme="dark"], html[data-yp-theme="light"] { /* زر/تعبئة ذهبية أساسية */ --yp-gold-fill: linear-gradient(135deg, var(--yp-gold-100), var(--yp-gold-500) 52%, var(--yp-gold-700)); /* نص متدرّج ذهبي (للأرقام الكبيرة والعناوين المميزة) */ --yp-gold-text: linear-gradient(160deg, var(--yp-gold-100), var(--yp-gold-300) 60%, var(--yp-gold-500)); /* خلفية الصفحة الكاملة */ --yp-page-bg: var(--yp-page-glow-1), var(--yp-page-glow-2), linear-gradient(168deg, var(--yp-bg-2), var(--yp-bg-1) 42%, var(--yp-bg-0) 78%); /* خيط ذهبي أفقي (فواصل العناوين) */ --yp-hairline: linear-gradient(90deg, transparent, rgb(var(--yp-gold-rgb) / 0.45), transparent); /* ── عقد السطح الزجاجي المشترك ── هذه الثلاثة هي المرجع الوحيد لكل بطاقة/لوح/درج/حوار في التطبيق. أي سطح جديد يستهلكها ولا يعرّف خلفية أو حدًّا خاصًّا به، حتى لا نعود لاحقًا فنجد بطاقة رمادية وأخرى بيج وثالثة بيضاء. */ --yp-surface-glass: var(--yp-glass); --yp-surface-glass-border: var(--yp-line); --yp-surface-glass-shadow: var(--yp-shadow-sm), var(--yp-inner-light); } /* ──────────────────────────────────────────── ٥ — احترام تقليل الحركة (CSS؛ حلقات JS مسؤولية كل تطبيق) ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --yp-dur-fast: 0.001s; --yp-dur-base: 0.001s; --yp-dur-slow: 0.001s; --yp-lift-hover: 0px; --yp-lift-hover-sm: 0px; } }