/* ═══════════════════════════════════════════════════════════════════ الشركاء التقنيون · Tech Partners — Design tokens المرجع الكامل: DESIGN.md هويّتان قابلتان للتبديل عبر السمة data-brand على عنصر : data-brand="petrol" → بترولي + نحاسي (الافتراضي) data-brand="navy" → كحلي + ذهبي لتثبيت هوية واحدة نهائياً: اضبط data-brand في القالب واحذف الكتل الخاصة بالهوية الأخرى — لا شيء آخر في الكود يعتمد عليها. ═══════════════════════════════════════════════════════════════════ */ /* ─── 1. توكنز غير لونية (مشتركة بين الهويتين والوضعين) ─────────── */ :root { /* الخطوط */ --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; --font-en: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-body: var(--font-ar), var(--font-en); /* مقياس الحجم */ --t-display: 3.5rem; --lh-display: 1.08; --ls-display: -0.022em; --t-h1: 2.5rem; --lh-h1: 1.15; --ls-h1: -0.018em; --t-h2: 1.875rem; --lh-h2: 1.22; --ls-h2: -0.014em; --t-h3: 1.375rem; --lh-h3: 1.32; --ls-h3: -0.008em; --t-h4: 1.125rem; --lh-h4: 1.40; --ls-h4: -0.004em; --t-body-lg: 1.125rem; --lh-body-lg: 1.65; --t-body: 1rem; --lh-body: 1.70; --t-small: 0.875rem; --lh-small: 1.60; --t-caption: 0.8125rem; --lh-caption: 1.50; --t-eyebrow: 0.75rem; --lh-eyebrow: 1.40; --ls-eyebrow: 0.12em; /* المسافات — أساس 4px */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* الأنصاف والحدود */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; --border-width: 1px; --border-width-ctrl: 1.5px; --border-width-focus: 2px; /* التخطيط */ --container: 1200px; --container-text: 68ch; --gutter: var(--space-5); --header-h: 72px; /* الحركة */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 480ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* مضاعِف الاتجاه — يُستخدم في كل transform أفقي */ --dir: 1; } [dir="rtl"] { --dir: -1; } @media (max-width: 768px) { :root { --space-10: 4rem; --space-9: 3rem; --gutter: var(--space-4); --header-h: 60px; } } /* ═══ 2. الهوية «بترولي + نحاسي» — الوضع الفاتح (الافتراضي) ═══════ */ :root, :root[data-brand="petrol"] { color-scheme: light; --surface-sunken: #F1F2EE; --surface-bg: #FAFAF7; --surface-raised: #FFFFFF; --surface-overlay: #FFFFFF; --border-subtle: #E6E7E1; --border-default: #D5D7CF; --border-strong: #B4B7AD; --border-control: #878D83; --text-primary: #14201F; --text-secondary: #46534F; --text-muted: #616E68; --text-on-brand: #FFFFFF; --text-inverse: #F3F6F4; --brand: #0B5F58; --brand-hover: #084A45; --brand-active: #063833; --brand-subtle: #E6F0EE; --brand-border: #9FC4BF; --accent: #B0812E; --accent-text: #8A6420; --accent-subtle: #F7EEDC; --success: #1B6B3A; --success-subtle: #E3F1E8; --warning: #8A5B00; --warning-subtle: #FBF0DC; --danger: #A32219; --danger-subtle: #FBE9E7; --info: #1E4E8C; --info-subtle: #E4EDF8; --text-on-success: #FFFFFF; --text-on-warning: #FFFFFF; --text-on-danger: #FFFFFF; --text-on-info: #FFFFFF; --focus-ring: #0B5F58; --focus-halo: #FAFAF7; --shadow-xs: 0 1px 2px rgba(20, 32, 31, .06); --shadow-sm: 0 1px 2px rgba(20, 32, 31, .06), 0 2px 6px rgba(20, 32, 31, .05); --shadow-md: 0 2px 4px rgba(20, 32, 31, .05), 0 6px 16px rgba(20, 32, 31, .08); --shadow-lg: 0 4px 8px rgba(20, 32, 31, .05), 0 16px 32px rgba(20, 32, 31, .10); --shadow-focus: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } /* ═══ 3. الهوية «كحلي + ذهبي» — الوضع الفاتح ═════════════════════ */ :root[data-brand="navy"] { color-scheme: light; --surface-sunken: #F0F2F5; --surface-bg: #FAFAFC; --surface-raised: #FFFFFF; --surface-overlay: #FFFFFF; --border-subtle: #E4E7EC; --border-default: #D3D8E0; --border-strong: #B2B9C4; --border-control: #8A8F98; --text-primary: #131B26; --text-secondary: #454F5C; --text-muted: #616B78; --text-on-brand: #FFFFFF; --text-inverse: #F4F6F9; --brand: #123A6B; --brand-hover: #0D2C53; --brand-active: #09203C; --brand-subtle: #E8EEF7; --brand-border: #A9BFDC; --accent: #B8860B; --accent-text: #8A6410; --accent-subtle: #FBF1DA; --success: #1B6B3A; --success-subtle: #E3F1E8; --warning: #8A5B00; --warning-subtle: #FBF0DC; --danger: #A32219; --danger-subtle: #FBE9E7; --info: #1E4E8C; --info-subtle: #E4EDF8; --text-on-success: #FFFFFF; --text-on-warning: #FFFFFF; --text-on-danger: #FFFFFF; --text-on-info: #FFFFFF; --focus-ring: #123A6B; --focus-halo: #FAFAFC; --shadow-xs: 0 1px 2px rgba(19, 27, 38, .06); --shadow-sm: 0 1px 2px rgba(19, 27, 38, .06), 0 2px 6px rgba(19, 27, 38, .05); --shadow-md: 0 2px 4px rgba(19, 27, 38, .05), 0 6px 16px rgba(19, 27, 38, .08); --shadow-lg: 0 4px 8px rgba(19, 27, 38, .05), 0 16px 32px rgba(19, 27, 38, .10); --shadow-focus: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } /* ═══ 4. الوضع الداكن — بترولي ═══════════════════════════════════ لاحظ انقلاب القطبية: تعبئة العلامة تصير فاتحة، فالنص عليها داكن. تفاصيل الفخ في DESIGN.md §2.4 */ :root[data-theme="dark"], :root[data-theme="dark"][data-brand="petrol"] { color-scheme: dark; --surface-sunken: #08110F; --surface-bg: #0C1917; --surface-raised: #132422; --surface-overlay: #1B2F2C; --border-subtle: #1F332F; --border-default: #2B4340; --border-strong: #416059; --border-control: #637570; --text-primary: #E6EDEA; --text-secondary: #A6B7B2; --text-muted: #84948F; --text-on-brand: #04221E; --text-inverse: #14201F; --brand: #3FBFA9; --brand-hover: #5FD0BB; --brand-active: #7ADCC9; --brand-subtle: #0F2E29; --brand-border: #2A5D55; --accent: #D9A441; --accent-text: #D9A441; --accent-subtle: #2A2010; --success: #4CC985; --success-subtle: #0E2A1B; --warning: #E3AC45; --warning-subtle: #2A2010; --danger: #F87A6C; --danger-subtle: #2E1512; --info: #7FB3EF; --info-subtle: #12233A; --text-on-success: #0E2A1B; --text-on-warning: #2A2010; --text-on-danger: #2E1512; --text-on-info: #12233A; --focus-ring: #3FBFA9; --focus-halo: #0C1917; --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 8px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .60); --shadow-focus: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } /* ═══ 5. الوضع الداكن — كحلي ═════════════════════════════════════ */ :root[data-theme="dark"][data-brand="navy"] { color-scheme: dark; --surface-sunken: #070D16; --surface-bg: #0B1421; --surface-raised: #131F30; --surface-overlay: #1B2A3E; --border-subtle: #1C2939; --border-default: #28374B; --border-strong: #3D5069; --border-control: #61728A; --text-primary: #E4EAF2; --text-secondary: #A8B6C8; --text-muted: #8493A6; --text-on-brand: #04182E; --text-inverse: #131B26; --brand: #79B0F0; --brand-hover: #9AC5F6; --brand-active: #B4D4F9; --brand-subtle: #0E2540; --brand-border: #2C4E77; --accent: #E0B54A; --accent-text: #E0B54A; --accent-subtle: #2B2210; --success: #4CC985; --success-subtle: #0E2A1B; --warning: #E3AC45; --warning-subtle: #2B2210; --danger: #F87A6C; --danger-subtle: #2E1512; --info: #7FB3EF; --info-subtle: #12233A; --text-on-success: #0E2A1B; --text-on-warning: #2B2210; --text-on-danger: #2E1512; --text-on-info: #12233A; --focus-ring: #79B0F0; --focus-halo: #0B1421; --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 8px 24px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .65); --shadow-focus: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } /* ═══ 6. الوضع الداكن من إعداد النظام ════════════════════════════ محروس بـ :not([data-theme="light"]) حتى لا يتجاوز اختيار المستخدم الصريح للوضع الفاتح. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-sunken: #08110F; --surface-bg: #0C1917; --surface-raised: #132422; --surface-overlay: #1B2F2C; --border-subtle: #1F332F; --border-default: #2B4340; --border-strong: #416059; --border-control: #637570; --text-primary: #E6EDEA; --text-secondary: #A6B7B2; --text-muted: #84948F; --text-on-brand: #04221E; --text-inverse: #14201F; --brand: #3FBFA9; --brand-hover: #5FD0BB; --brand-active: #7ADCC9; --brand-subtle: #0F2E29; --brand-border: #2A5D55; --accent: #D9A441; --accent-text: #D9A441; --accent-subtle: #2A2010; --success: #4CC985; --success-subtle: #0E2A1B; --warning: #E3AC45; --warning-subtle: #2A2010; --danger: #F87A6C; --danger-subtle: #2E1512; --info: #7FB3EF; --info-subtle: #12233A; --text-on-success: #0E2A1B; --text-on-warning: #2A2010; --text-on-danger: #2E1512; --text-on-info: #12233A; --focus-ring: #3FBFA9; --focus-halo: #0C1917; --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 8px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .60); } :root:not([data-theme="light"])[data-brand="navy"] { --surface-sunken: #070D16; --surface-bg: #0B1421; --surface-raised: #131F30; --surface-overlay: #1B2A3E; --border-subtle: #1C2939; --border-default: #28374B; --border-strong: #3D5069; --border-control: #61728A; --text-primary: #E4EAF2; --text-secondary: #A8B6C8; --text-muted: #8493A6; --text-on-brand: #04182E; --text-inverse: #131B26; --brand: #79B0F0; --brand-hover: #9AC5F6; --brand-active: #B4D4F9; --brand-subtle: #0E2540; --brand-border: #2C4E77; --accent: #E0B54A; --accent-text: #E0B54A; --accent-subtle: #2B2210; --warning-subtle: #2B2210; --text-on-warning: #2B2210; --focus-ring: #79B0F0; --focus-halo: #0B1421; } }