/* ============================================================================ * AqaR Digital — Design Tokens (Phase 2A foundation · Phase 2B semantic layer) * ---------------------------------------------------------------------------- * المصدر الوحيد للغة البصرية للمنصة. يُحمَّل قبل كل الستايلات. * قاعدة: لا قيم لونية/مسافات/ظلال/أحجام خط مكررة في الشاشات — كل شيء يستهلك من هنا. * * البنية (طبقتان): * 1) PRIMITIVES — عائلات الألوان الكانونية (navy/gold/الأسطح/الحالات). القيم الخام * لا تزال معرَّفة أيضًا في index.html :root بأسمائها القديمة (--navy, --gold …) * لأن مئات القواعد تستهلكها؛ الأسماء --aq-* هنا تشير إليها (alias) بلا ازدواج قيم. * 2) SEMANTIC — أسماء بالمعنى (bg/surface/border/text/status/accent) تستهلكها * المكونات والشاشات. الشاشات القديمة تُهاجَر إليها تدريجيًا (Phase 2B: بلوك index.html). * ==========================================================================*/ :root { /* ================================================================== * 1) PRIMITIVES — Brand palette (alias → index.html :root canonical) * ================================================================== */ --aq-navy: var(--navy, #0A1C2F); --aq-navy-deep: var(--navy-deep, #061321); --aq-navy-dark: var(--navy-dark, #081727); --aq-navy-soft: var(--navy-soft, #14344F); --aq-gold: var(--gold, #C99A2E); --aq-gold-soft: var(--gold-soft, #E6C978); --aq-gold-dark: var(--gold-dark, #A77A18); --aq-white: var(--white, #FFFFFF); --aq-surface: var(--off-white, #F7F6F2); --aq-surface-2: var(--bg, #F1EFE8); --aq-text: var(--text, #10253A); --aq-text-light: var(--text-light, #EAF0F6); --aq-text-muted-d:var(--text-muted, #AEB9C6); /* muted على الداكن */ --aq-text-muted: var(--muted, #5E6B7A); /* muted على الفاتح */ --aq-border: var(--border, rgba(16,37,58,0.14)); --aq-border-gold: var(--border-gold, rgba(201,154,46,0.28)); --aq-line-dark: var(--line-dark, rgba(255,255,255,0.10)); --aq-success-bg: var(--success-bg, #E4F1E9); --aq-success-fg: var(--success-fg, #1E6E45); --aq-warn-bg: var(--warn-bg, #F7EED9); --aq-warn-fg: var(--warn-fg, #7A5600); --aq-error-bg: var(--error-bg, #F7E4E4); --aq-error-fg: var(--error-fg, #B0271F); /* ================================================================== * 2) SEMANTIC — Backgrounds & surfaces (المنصة داكنة أساسًا) * ================================================================== */ --aq-bg-page: var(--page-bg, #0D2438); /* خلفية الصفحة */ --aq-bg-surface: var(--glass-panel, rgba(19,42,63,0.72)); /* سطح قياسي (ألواح/فلاتر) */ --aq-bg-surface-elevated: var(--glass-card, rgba(20,43,67,0.74)); /* سطح مرتفع (كروت الوحدات) */ --aq-bg-surface-deep: var(--glass-strong,rgba(6,19,33,0.76)); /* سطح عميق (AI console / مودالات) */ --aq-bg-surface-nav: var(--glass, rgba(10,28,47,0.55)); /* أسطح التنقل الشفافة */ --aq-bg-surface-light: var(--off-white, #F7F6F2); /* سطح فاتح (لوحات فاتحة/طباعة) */ --aq-bg-input: var(--input-dark, rgba(27,52,74,0.6)); /* خلفية الحقول على الداكن */ --aq-bg-input-focus: var(--aq-prop-surface, #FFFFFF); /* هوية فاتحة: التظليلات صارت داكنة-على-فاتح بدل بيضاء-على-داكن */ --aq-bg-muted-1: rgba(16,33,30,0.035); /* أخف تظليل (صفوف/شرائط) */ --aq-bg-muted-2: rgba(16,33,30,0.055); /* hover خفيف */ --aq-bg-muted-3: rgba(16,33,30,0.075); /* شارات محايدة */ --aq-bg-muted-4: rgba(255,255,255,0.15); /* أزرار عائمة فوق الصور */ --aq-overlay: rgba(4,12,22,0.55); /* خلفية drawer / مودال */ --aq-overlay-strong: rgba(4,12,22,0.75); /* ------------------------------------------------ Borders */ --aq-border-dark: var(--aq-line-dark); /* hairline على الداكن */ --aq-border-strong: rgba(16,33,30,0.16); /* حد أوضح (حقول/كروت) */ --aq-border-light: var(--aq-border); /* hairline على الفاتح */ --aq-border-accent: var(--aq-border-gold); /* حد ذهبي هادئ */ --aq-border-accent-strong: rgba(14,84,70,0.45); /* حد أخضر واضح */ /* ------------------------------------------------ Text */ --aq-text-primary: var(--aq-text-light); /* نص أساسي على الداكن */ --aq-text-secondary: rgba(22,33,30,0.78); /* نص ثانوي على الفاتح */ --aq-text-tertiary: rgba(22,33,30,0.62); /* نص خافت على الفاتح */ --aq-text-disabled: rgba(22,33,30,0.42); --aq-text-inverse: var(--aq-text); /* نص داكن على الفاتح */ --aq-text-inverse-muted: var(--aq-text-muted); --aq-text-on-accent: #FFFFFF; /* نص فوق الأخضر */ --aq-text-placeholder: #8A908E; /* ------------------------------------------------ Brand / accent */ --aq-brand-navy: var(--aq-navy); --aq-brand-gold: var(--aq-gold); --aq-accent: var(--aq-gold); --aq-accent-soft: var(--aq-gold-soft); --aq-accent-strong: var(--aq-gold-dark); --aq-accent-tint-1: rgba(14,84,70,0.06); /* تظليل أخضر شبه معدوم */ --aq-accent-tint-2: rgba(14,84,70,0.10); /* تظليل أخضر خفيف (active) */ --aq-accent-tint-3: rgba(14,84,70,0.20); /* حد/تظليل أخضر أوضح */ --aq-accent-tint-4: rgba(14,84,70,0.30); /* hover على active */ --aq-focus-ring: 0 0 0 3px rgba(14,84,70,0.16); /* حلقة التركيز الموحدة */ --aq-focus-outline: 2px solid var(--aq-gold); /* ------------------------------------------------ Status (على الداكن: *-soft / على الفاتح: *-fg + *-bg) */ --aq-success: #4FA579; --aq-success-strong: #46946C; --aq-success-soft: #1E7145; --aq-success-tint: rgba(30,110,69,0.10); --aq-success-border: rgba(30,110,69,0.32); --aq-success-solid-bg: rgba(30,110,69,0.92); --aq-success-solid-fg: #EAF7EF; --aq-success-dot: #1E7145; --aq-danger: var(--aq-error-fg); --aq-danger-soft: #B0271F; --aq-danger-tint: rgba(176,39,31,0.08); --aq-danger-border: rgba(176,39,31,0.35); --aq-danger-border-strong: rgba(176,39,31,0.6); --aq-danger-solid-bg: rgba(176,39,31,0.92); --aq-danger-solid-fg: #FBEAEA; --aq-danger-bg-light: #FFF8F7; --aq-warning: var(--aq-warn-fg); --aq-warning-soft: #8A6412; --aq-warning-tint: rgba(201,154,46,0.14); --aq-warning-border: rgba(201,154,46,0.4); --aq-info: #1C4A75; --aq-info-soft: #1C4A75; --aq-info-tint: rgba(28,74,117,0.10); --aq-info-border: rgba(143,193,234,0.35); --aq-info-bg-light: #DBE7F3; --aq-neutral-disabled: #9AA4AE; /* أدوار المستخدمين (شارات على الأسطح الفاتحة) */ --aq-role-owner-bg: var(--aq-prop-green-soft, #E4EDEA); --aq-role-owner-fg: var(--aq-prop-green-ink, #023A3A); --aq-role-manager-bg: var(--aq-info-bg-light); --aq-role-manager-fg: var(--aq-info); --aq-role-sales-bg: #E6EFE9; --aq-role-sales-fg: var(--aq-success-fg); --aq-role-entry-bg: #EFE7F5; --aq-role-entry-fg: #5A3A86; /* توافق خلفي: --ok كان مستخدمًا في الإحصاءات بلا تعريف (يرث اللون) → يُعرَّف هنا */ --ok: var(--aq-success-soft); --danger: var(--aq-danger-soft); /* ================================================================== * SPACING SCALE — 4px base. ممنوع margins/paddings عشوائية. * ================================================================== */ --aq-space-1: 4px; --aq-space-2: 8px; --aq-space-3: 12px; --aq-space-4: 16px; --aq-space-5: 20px; --aq-space-6: 24px; --aq-space-8: 32px; --aq-space-10: 40px; --aq-space-12: 48px; --aq-space-16: 64px; /* ================================================================== * TYPOGRAPHY — Cairo (عربي أولًا). سلّم واحد تستهلكه كل الشاشات. * ================================================================== */ --aq-font: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; --aq-fs-micro: 10px; /* شارات دقيقة / وسوم */ --aq-fs-caption-sm: 11px; /* شارات، بيانات مساعدة */ --aq-fs-caption: 12px; /* شرح ثانوي */ --aq-fs-label: 12.5px; /* عناوين الحقول */ --aq-fs-small: 13px; /* نص صغير / جداول */ --aq-fs-table: var(--aq-fs-small); --aq-fs-button: 13.5px; /* الأزرار */ --aq-fs-input: var(--aq-fs-body); --aq-fs-body: 14px; /* النص الأساسي */ --aq-fs-body-lg: 15px; /* نص بارز */ --aq-fs-card-title: 16px; /* عنوان الكارت */ --aq-fs-title-sm: 18px; /* عنوان فرعي */ --aq-fs-section-title: 20px; /* عنوان القسم */ --aq-fs-title-lg: 22px; /* عنوان بارز (هيدر الموقع) */ --aq-fs-page-title: 26px; /* عنوان الصفحة */ --aq-fs-kpi: 30px; /* أرقام المؤشرات */ --aq-fs-hero: 32px; /* عنوان الغلاف */ --aq-fs-display: 40px; /* أرقام/عناوين عرض */ --aq-lh-tight: 1.25; --aq-lh-body: 1.65; --aq-fw-regular: 400; --aq-fw-medium: 600; --aq-fw-bold: 700; --aq-fw-black: 800; /* ================================================================== * RADIUS / SHADOWS / MOTION — Premium = ارتفاع خفيف وحدود مصقولة. * ================================================================== */ --aq-radius-xs: 6px; --aq-radius-sm: var(--radius-sm, 8px); --aq-radius-md: var(--radius-md, 13px); --aq-radius-lg: var(--radius-lg, 16px); --aq-radius-card: var(--aq-radius-md); --aq-radius-pill: 999px; --aq-shadow-subtle: 0 1px 3px rgba(4,12,22,0.10); --aq-shadow-card: var(--shadow-card, 0 6px 20px rgba(4,12,22,0.26)); --aq-shadow-elevated: var(--shadow-soft, 0 10px 30px rgba(0,0,0,0.18)); --aq-shadow-overlay: 0 -8px 28px rgba(0,0,0,0.28); /* أسماء 2A (تبقى صالحة) */ --aq-shadow-1: var(--aq-shadow-subtle); --aq-shadow-2: 0 4px 14px rgba(4,12,22,0.16); --aq-shadow-3: var(--aq-shadow-elevated); --aq-ease: var(--ease, 180ms ease); --aq-motion-fast: 150ms; --aq-motion-base: 200ms; --aq-motion-slow: 250ms; /* ================================================================== * Z-INDEX MAP — خريطة الطبقات الموحّدة للمنصة. * الاصطلاح القائم (لا يُغيَّر): المودالات 1600 · كارت فوق المشابهة 1650 · اللايتبوكس 1700. * ================================================================== */ --aq-z-base: 1; --aq-z-sticky: 100; --aq-z-shell-overlay: 900; /* خلفية drawer الموبايل */ --aq-z-shell-sidebar: 910; --aq-z-shell-header: 920; --aq-z-dash-backdrop: 1390; /* drawer لوحة التحكم الداخلي (قائم) */ --aq-z-dash-drawer: 1400; --aq-z-toast: 1500; --aq-z-modal: 1600; --aq-z-overlay-card: 1650; --aq-z-lightbox: 1700; /* ================================================================== * SHELL DIMENSIONS + CONTAINERS * ================================================================== */ --aq-header-h: 60px; --aq-sidebar-w: 250px; --aq-sidebar-w-collapsed: 72px; /* محجوز لطور مستقبلي */ --aq-container-max: var(--app-max, 1720px); --aq-content-pad: var(--aq-space-5); /* ================================================================== * BREAKPOINTS (توثيقي — تُستخدم كقيم حرفية في @media). ثلاث درجات فقط: * xs ≤ 420px (هاتف صغير — تكديس كامل) * sm ≤ 640px (هاتف) * md ≤ 1024px (تابلت / drawer mode للشل ولوحة التحكم) * ================================================================== */ /* ================================================================== * PROPERTY-PLATFORM PALETTE (مرحلة إعادة تصميم البحث والنتائج) * ------------------------------------------------------------------ * مستخرجة فعليًا بالعيّنات من الصورتين المرجعيتين المعتمدتين في المشروع * (SEARCH_RESULTS_REFERENCE.png / SEARCH_RESULTS_REFERENCE2.png) — لا تخمين: * #004C43 الشريط الأخضر العميق · #023A3A زر البحث · #0E5446 زر بحث النتائج * #E4EDEA رقاقة نشطة · #E7EDED قسم فاتح · #F7F7F7 خلفية الصفحة * #FFFFFF سطح البطاقة · #898989 نص ثانوي · #B4FF6C أكسنت شارة * تُستهلك حصريًا داخل تجربة البحث/النتائج/overlay الوحدة — لا تمسّ هوية * الشل (navy/gold) ولا بقية الشاشات. * ================================================================== */ --aq-prop-green: #0E5446; /* الأساسي — أزرار، أسعار، حالات نشطة */ --aq-prop-green-deep: #004C43; /* أعمق — شرائط، تدرّج الهيرو */ --aq-prop-green-ink: #023A3A; /* أغمق — زر البحث الأساسي/hover */ --aq-prop-green-soft: #E4EDEA; /* تظليل فاتح — رقاقة نشطة، خلفيات لطيفة */ --aq-prop-green-line: #BFD8CF; /* حدّ أخضر باهت */ --aq-prop-accent: #B4FF6C; /* أكسنت ليموني — شارات محدودة الاستخدام */ --aq-prop-canvas: #F7F7F7; /* خلفية صفحة النتائج */ --aq-prop-canvas-2: #E7EDED; /* قسم فاتح ثانوي */ --aq-prop-surface: #FFFFFF; /* سطح البطاقة/الكونسول */ --aq-prop-surface-2: #FAFAFA; /* سطح ثانوي داخل البطاقة */ --aq-prop-border: #E3E6E5; /* حدّ فاتح محايد */ --aq-prop-border-strong: #D3D8D7; --aq-prop-text: #16211E; /* نص أساسي على الأسطح الفاتحة */ --aq-prop-text-muted: #6E7573; /* نص ثانوي (مشتق من #898989 لتباين أعلى) */ --aq-prop-text-faint: #8A908E; --aq-prop-shadow: 0 10px 30px rgba(11,40,33,0.10); --aq-prop-shadow-lg: 0 24px 60px rgba(6,28,23,0.24); --aq-prop-radius: 16px; /* بطاقات العقار */ --aq-prop-radius-lg: 24px; /* كونسول البحث/الهيرو */ --aq-prop-radius-sm: 10px; /* حقول ورقائق */ /* --- الأسماء الدلالية للهوية العامة (تُستهلك في كل التطبيق) --- */ --aq-prop-primary: var(--aq-prop-green); /* #0E5446 */ --aq-prop-primary-deep: var(--aq-prop-green-deep); /* #004C43 */ --aq-prop-cta: var(--aq-prop-green-ink); /* #023A3A */ --aq-prop-active: var(--aq-prop-green-soft); /* #E4EDEA */ --aq-prop-background: var(--aq-prop-canvas); /* #F7F7F7 */ --aq-prop-background-2: var(--aq-prop-canvas-2); /* #E7EDED */ --aq-prop-white: var(--aq-prop-surface); /* #FFFFFF */ --aq-prop-accent-lime: var(--aq-prop-accent); /* #B4FF6C */ }