/* ═══ الخطوط: مستضافة ذاتياً (2026-08-10) ═══════════════════════════ كانت تُحمَّل من fonts.googleapis.com، وPageSpeed قاس طلب الـCSS وحده **752ms حاجباً للعرض** — أكبر بند منفرد في أداء الجوال (71). الكتل هنا داخل tokens.css عمداً لا في ملف مستقل: ملف ثالث يعني طلباً حاجباً ثالثاً، والهدف حذف طلب لا استبداله. ⚠️ عائلة واحدة لا اثنتين. كان --font-lat يشير إلى "IBM Plex Sans" المنفصلة: **634 كيلوبايت** مقابل ثلاثة مواضع استعمال. وIBM Plex Sans Arabic تحمل أصلاً محارف لاتينية من تصميم IBM Plex Sans نفسه (عائلة واحدة فائقة)، فالمظهر لا يتغيّر والحمل ينصف. المقاطع: عربي + لاتيني + لاتيني موسَّع فقط. حُذفت السيريلية واليونانية والفيتنامية — لا نصّ لدينا بها. الأسماء تحمل بصمة محتواها، وserver.js يمنحها immutable لسنة: أي تحديث خط ينتج اسماً جديداً فلا يعلق متصفح على نسخة قديمة. المجموع 277KB مقابل 917KB (ويُنزَّل منها ما يلزم المقطع فقط). */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-ar-400-arabic.6010e7fd.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-ar-400-latin-ext.1935fa1a.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-ar-400-latin.9ed8dcb0.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-ar-500-arabic.90aef64f.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-ar-500-latin-ext.ae5c1a58.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-ar-500-latin.be6a3b2e.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-ar-600-arabic.16734a5a.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-ar-600-latin-ext.0f7c03bb.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-ar-600-latin.63f47572.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/plex-ar-700-arabic.04c730b4.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/plex-ar-700-latin-ext.ab0b9584.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/plex-ar-700-latin.ae2d59f9.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── Surface · 60% ─────────────────────────── */ --color-bg: #FAF6F0; /* sand 50 · app background */ --color-surface: #F4EDE3; /* sand 100 · cards, inputs */ --color-surface-sunk: #E8DECF; /* sand 200 · wells, image slots */ --color-border: #D9CFC3; /* ink 200 */ --color-border-strong: #A79C92; /* ink 300 · non-text only */ /* ── Primary · 30% · trust & privacy ───────── */ --color-primary-50: #F3E8F0; --color-primary-100: #E0C6DB; --color-primary-300: #9A5D8E; --color-primary-500: #6A2E60; --color-primary: #4B1E43; /* 12.5:1 on bg · 13.4:1 w/ white */ --color-primary-800: #2A1226; /* ── Spark · 10% · primary action + reserved ─ */ --color-spark-50: #FBEAE4; --color-spark-200: #F3B9A9; /* 7.9:1 on primary */ --color-spark-400: #E1745B; /* hover on dark only */ --color-action: #C43D28; /* 4.97:1 w/ white · 4.8:1 on bg */ --color-action-hover: #9A2E1D; --color-action-press: #6B2014; --color-action-text: #9A2E1D; /* 6.47:1 on spark-50 · نص فوق تظليل */ /* ── Text ──────────────────────────────────── */ --color-text: #1F1A17; /* 16.0:1 */ --color-text-body: #4A423C; /* 9.1:1 */ --color-text-muted: #6F655D; /* 5.3:1 */ --color-text-on-dark: #FAF6F0; /* 12.5:1 on primary */ --color-text-on-spark: #FFF9F4; /* 4.97:1 on action */ /* ── Semantic ──────────────────────────────── */ --color-success: #2F6B4F; /* 5.8:1 */ --color-success-bg: #EAF2ED; --color-error: #B3261E; /* 6.1:1 */ --color-error-bg: #FBECEA; --color-warning: #8A5A00; /* 5.5:1 */ --color-warning-bg: #FBF2E0; /* ── Type ──────────────────────────────────── */ --font-ar: "IBM Plex Sans Arabic", system-ui, sans-serif; /* العائلة نفسها: لاتينيّة IBM Plex Sans Arabic هي IBM Plex Sans تصميماً */ --font-lat: "IBM Plex Sans Arabic", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fs-1: 0.750rem; --lh-1: 1.80; --lh-1-lat: 1.60; --fs-2: 0.875rem; --lh-2: 1.75; --lh-2-lat: 1.55; --fs-3: 1.000rem; --lh-3: 1.80; --lh-3-lat: 1.60; --fs-4: 1.125rem; --lh-4: 1.75; --lh-4-lat: 1.55; --fs-5: 1.375rem; --lh-5: 1.60; --lh-5-lat: 1.45; --fs-6: 1.750rem; --lh-6: 1.50; --lh-6-lat: 1.35; --fs-7: 2.250rem; --lh-7: 1.40; --lh-7-lat: 1.25; --fs-8: 3.000rem; --lh-8: 1.30; --lh-8-lat: 1.15; /* ── Space · 4px base ──────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── Brand asset · corner cut ──────────────── */ --cut-sm: 10px; /* buttons, badges */ --cut-md: 18px; /* cards, inputs */ --cut-lg: 30px; /* hero, media */ /* رمز لكل مقاس: --corner-cut (md) وحده لا يكفي، فالأزرار تستعمل sm والأقسام lg. كتابة المضلّع يدوياً لأحدهما تفوّت مرآة LTR بصمت — وهو ما وقع فعلاً لـ.btn-primary (زر الإجراء الأساسي) فبقيت قصّته على اليمين في الإنجليزية. */ --corner-cut-sm: polygon( 0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%); --corner-cut: polygon( 0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, 0 100%); --corner-cut-lg: polygon( 0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%); /* ── Icons ─────────────────────────────────── */ --icon-grid: 24px; --icon-stroke: 1.5; --icon-radius: 2px; /* ── Numerals · Western Arabic digits only ─── */ --numerals: latn; /* never arab / arabext */ --radius-sm: 6px; --radius-md: 10px; --radius-pill: 999px; --focus-ring: 0 0 0 3px #E0C6DB; } /* RTL is the default document direction */ html { direction: rtl; font-variant-numeric: lining tabular-nums; } [lang="ar"] { font-feature-settings: "numr" 0; } /* ══════════════════════════════════════════════════════════════ الإنجليزية · تجاوز لا تفريع (Gjafa English.dc.html) ══════════════════════════════════════════════════════════════ الخصائص المنطقية تغطّي margin وpadding وborder وtext-align، ولا تغطّي أربعاً: clip-path وtransform وbackground-position وزوايا التدرّجات. هذه الأربع إحداثياتها **فيزيائية** تُحسب من الحافة اليسرى مهما قالت direction. وثيقة نظام العلامة ادّعت أن القصّة «تنعكس تلقائياً في LTR» — وهذا خطأ صحّحته Gjafa English.dc.html صراحةً. بلا التجاوز أدناه تقصّ الصفحة الإنجليزية الزاوية **اليمنى** العليا، فيُقرأ أصل العلامة معكوساً ضدّ اتجاه القراءة نفسه. --icon-flip: يقرؤه icons.js وكان غير معرَّف إطلاقاً، فبقيت قيمته 1 دائماً ولم تنعكس أيقونتا share وback في الإنجليزية. الأيقونات الثماني عشرة الأخرى لا تقرؤه ولا تنعكس أبداً. */ html:lang(en), html[dir="ltr"] { direction: ltr; --corner-cut-sm: polygon( var(--cut-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-sm)); --corner-cut: polygon( var(--cut-md) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-md)); --corner-cut-lg: polygon( var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-lg)); --icon-flip: -1; } /* التتبّع الحرفي: سالب في العناوين الإنجليزية الكبيرة فقط. تتبّع العربية ممنوع مطلقاً — يكسر وصل الحروف. */ html:lang(en) h1, html:lang(en) h2, html[dir="ltr"] h1, html[dir="ltr"] h2 { letter-spacing: -0.01em; } /* ══════════════════════════════════════════════════════════════ الوضع الداكن ليس قلباً للألوان. --color-action ثابت في الوضعين: #C43D28 مع #FFF9F4 = 4.97:1 على الاثنين، فزر الإجراء لا يتغيّر إطلاقاً. --color-primary وحده ينقلب دوره من خلفية إلى نصّ، فيأخذ مقلوبه. الأسطح مائلة للبنفسجي لا رمادية — الرمادي يجعل الداكن ميّتاً. ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #17101A; --color-surface: #221A24; --color-surface-sunk: #2C2130; --color-border: #3A2E3E; --color-border-strong: #584A5C; /* non-text only */ --color-primary-50: #33253A; --color-primary-100: #4A3550; --color-primary: #D9B6D2; /* 10.3:1 on bg */ --color-spark-50: #3A1E19; --color-action-hover: #E1745B; --color-action-text: #E1745B; /* 6.1:1 on spark-50 */ /* --color-action و --color-text-on-spark بلا تغيير */ --color-text: #F5EDE6; /* 16.2:1 */ --color-text-body: #C9BDB4; /* 10.2:1 */ --color-text-muted: #968A82; /* 5.6:1 */ --color-success: #7FC79E; /* 9.5:1 */ --color-success-bg: #1B3227; --color-error: #F08A80; /* 7.7:1 */ --color-error-bg: #3A1B18; --color-warning: #E0B25C; /* 9.5:1 */ --color-warning-bg: #33280F; --focus-ring: 0 0 0 3px #4A3550; } } [data-theme="dark"] { --color-bg: #17101A; --color-surface: #221A24; --color-surface-sunk: #2C2130; --color-border: #3A2E3E; --color-border-strong: #584A5C; --color-primary-50: #33253A; --color-primary-100: #4A3550; --color-primary: #D9B6D2; --color-spark-50: #3A1E19; --color-action-hover: #E1745B; --color-action-text: #E1745B; --color-text: #F5EDE6; --color-text-body: #C9BDB4; --color-text-muted: #968A82; --color-success: #7FC79E; --color-success-bg: #1B3227; --color-error: #F08A80; --color-error-bg: #3A1B18; --color-warning: #E0B25C; --color-warning-bg: #33280F; --focus-ring: 0 0 0 3px #4A3550; } /* ── الباترن · قصّة الزاوية مكرّرة ───────────────────────────── خلفيات فارغة فقط. لا يوضع خلف نصّ: فارق الـ3% لا يكسر التباين لكنه يكسر حدّ الحرف العربي المتصل. */ .gj-pattern { background-image: conic-gradient(from 225deg at 0 0, transparent 0 25%, var(--color-surface-sunk) 25% 50%, transparent 50%); background-size: 26px 26px; } .gj-pattern--lg { background-size: 52px 52px; } /* ── أغلفة المناسبات · مولَّدة بلا صور ───────────────────────── تطابق قيم #edit-occasion-type في my-wishlist.html */ .gj-cover { background: var(--color-primary); } .gj-cover--birthday { background: #4B1E43; background-image: repeating-linear-gradient(135deg, #5D2A54 0 12px, #4B1E43 12px 24px); } .gj-cover--wedding { background: #6A2E60; background-image: repeating-linear-gradient(90deg, #7C3A72 0 3px, #6A2E60 3px 16px); } .gj-cover--graduation { background: #2A1226; background-image: repeating-linear-gradient(45deg, #3A1B35 0 8px, #2A1226 8px 20px); } .gj-cover--eid { background: #8A5A00; background-image: repeating-linear-gradient(135deg, #9C6800 0 6px, #8A5A00 6px 18px); } .gj-cover--newborn { background: #9A2E1D; background-image: repeating-linear-gradient(0deg, #AC3A26 0 4px, #9A2E1D 4px 18px); } .gj-cover--housewarming { background: var(--color-primary); } .gj-cover--other { background: var(--color-primary); } .gj-cover--none { background: var(--color-surface-sunk); }