/* ========================================================================== Design tokens — every value traced to a measurement in REFERENCE_AUDIT.md. Nothing in this codebase should hard-code a colour, radius or duration. ========================================================================== */ :root { /* --- Radii (audit §10) ------------------------------------------------ */ --radius-xs: 6px; --radius-sm: 9px; /* --a7-r-in */ --radius-md: 12px; /* band head + action pill */ --radius-lg: 14px; /* --a7-r : the default radius of the whole system */ --radius-xl: 20px; /* --a7-r-tile */ --radius-2xl: 32px; /* footer top corners */ --radius-pill: 999px; --radius-circle: 50%; /* --- Brand ------------------------------------------------------------ */ /* برتقالي الشعار. ثلاثة أدوار منفصلة عمدًا — كان لونٌ واحد يؤدّيها كلها حين كانت العلامة زرقاء، والبرتقالي لا يحتمل ذلك: --accent تعبئة وحدود وتوهّج. لا يُقاس تباينه بالخلفية بل بما فوقه. --accent-ink البرتقالي حين يكون *نصًّا* على خلفية الصفحة. --on-accent النص الذي يوضع *فوق* تعبئة برتقالية. الأرقام مقيسة لا مقدَّرة: #fe6603 على #f0f2f4 = 2.63 ← ساقط، فلا يصلح نصًّا في الوضع الفاتح #b23c00 على #f0f2f4 = 5.29 ← AA أبيض على #fe6603 = 2.95 ← ساقط #1a0f05 على #fe6603 = 6.39 ← AA ولهذا النص فوق البرتقالي فحميٌّ دافئ لا أبيض. وهو أيضًا ما يمنح الأزرار طابعًا مغايرًا للأزرق/الأبيض المألوف. */ --accent: #ff7a1a; --accent-2: #f2620a; --accent-ink: #ff8c38; --on-accent: #1a0f05; --accent-warm: #ffb347; /* الطرف الفاتح لتدرّجات العلامة */ /* --- Ink (overridden per theme below) --------------------------------- */ --ink-base: hsl(204deg 4% 78%); --foreground: color-mix(in oklch, var(--ink-base) 100%, transparent); /* Measured opacity steps: headings .92, body .78, secondary .62. */ --heading: color-mix(in oklch, var(--ink-base) 92%, transparent); --body-ink: color-mix(in oklch, var(--ink-base) 78%, transparent); --secondary: color-mix(in oklch, var(--ink-base) 62%, transparent); --muted: color-mix(in oklch, var(--ink-base) 68%, transparent); /* ٦٤٪ لا ٤٢٪. الدرجة المقيسة من المرجع كانت تعطي 2.85 في الوضع الداكن و2.67 في الفاتح — أي دون AA في الموضعين. وكل استعمالات هذا الرمز في الملف لونُ نصّ لا زخرفة (١٨ موضعًا، كلها `color`)، فالرفع لا يُثقل أي حدٍّ أو أيقونة. ٦٠٪ تكفي على خلفية الصفحة لكنها تسقط بفارق شعرة فوق الأسطح المموَّهة (`--fill-1`): 4.45 مقابل 4.5 المطلوبة. و٦٤٪ تتجاوزها هناك أيضًا. */ --faint: color-mix(in oklch, var(--ink-base) 64%, transparent); --ghost: color-mix(in oklch, var(--ink-base) 22%, transparent); --border: color-mix(in oklch, var(--ink-base) 12%, transparent); --border-strong: color-mix(in oklch, var(--ink-base) 16%, transparent); --border-soft: color-mix(in oklch, var(--ink-base) 6%, transparent); --fill-1: color-mix(in oklch, var(--ink-base) 4%, transparent); --fill-2: color-mix(in oklch, var(--ink-base) 5%, transparent); --fill-3: color-mix(in oklch, var(--ink-base) 8%, transparent); --tint: color-mix(in oklch, var(--accent) 8%, transparent); --tint-strong: color-mix(in oklch, var(--accent) 14%, transparent); --tint-faint: color-mix(in oklch, var(--accent) 3%, transparent); --tint-bd: color-mix(in oklch, var(--accent) 22%, transparent); /* --- Surfaces (audit §12) --------------------------------------------- */ /* Dark is what the toggle produces; the fresh-visit default is light, applied below via [data-theme="light"] which the server always sets. */ --background: #030c11; --card: #02090d; --sheet: #071720; --scrim-rgb: 8, 12, 20; --glass: color-mix(in oklch, var(--background) 82%, transparent); /* --- Shadows (audit §11) ---------------------------------------------- */ --shadow: 0 6px 18px -8px color-mix(in oklch, var(--accent) 40%, transparent); --shadow-hover: 0 16px 32px -12px color-mix(in oklch, var(--accent) 46%, transparent); --shadow-card: 0 8px 20px -16px rgba(0, 0, 0, 0.55); --shadow-show: 0 10px 24px -16px rgba(0, 0, 0, 0.5); --shadow-ibtn: 0 4px 14px -5px rgba(0, 0, 0, 0.4); --shadow-sheet: 0 20px 50px -12px rgba(8, 12, 20, 0.34), 0 2px 8px rgba(8, 12, 20, 0.08); /* --- Layout (audit §8) ------------------------------------------------ */ --container-width: 1100px; /* inner pages + footer */ --home-width: 992px; /* home bands */ --hero-width: 672px; /* home hero inner */ --mobile-padding: 16px; --desktop-padding: 32px; --page-padding: clamp(var(--mobile-padding), 2.5vw, var(--desktop-padding)); --nav-padding: clamp(16px, 2.8vw, 40px); --nav-height: 48px; /* --- Rhythm (audit §19, §20) ------------------------------------------ */ --section-gap: clamp(46px, 6.2vw, 88px); --section-gap-lg: clamp(46px, 6.5vw, 92px); --card-gap: 12px; --row-gap: clamp(6.4px, 0.7vw, 8.8px); --head-pad-x: clamp(14.4px, 1.6vw, 22.4px); --head-pad-y: 4.8px; --control-h: 40px; --field-h: 48px; /* --- Typography (audit §14-18) ---------------------------------------- */ --font-en: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-ar: var(--font-plex-ar), var(--font-inter), ui-sans-serif, system-ui, sans-serif; --font-sans: var(--font-en); --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: clamp(18px, 2vw, 20px); --text-xl: clamp(20px, 2.6vw, 24px); --text-2xl: clamp(24px, 2.45vw, 35.2px); /* profile name 35.2px @1440 */ --text-3xl: clamp(28px, 4.2vw, 40px); /* hero h1 40px, capped */ /* Component text sizes, measured at 1280 and 1440 and expressed as the fluid ramp between them (audit §14). */ --text-band-title: clamp(15px, 1.22vw, 17.6px); /* 16 -> 17.6 */ --text-band-action: clamp(12px, 0.95vw, 13.6px); /* 12.4 -> 13.6 */ --text-role: clamp(12px, 0.92vw, 13.2px); --text-bio: clamp(14px, 1.17vw, 16.8px); --text-link: clamp(13px, 1vw, 14.4px); --leading-tight: 1.08; --leading-display: 1.22; --leading-body: 1.55; --leading-ar: 1.75; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; --tracking-display: -0.02em; --tracking-title: -0.01em; /* --- Motion (audit §25) ------------------------------------------------ */ --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1); --ease-surface: cubic-bezier(0.22, 1, 0.36, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-std: cubic-bezier(0.16, 0.84, 0.28, 1); --dur-hover: 0.18s; --dur-arrive: 0.6s; --dur-stage: 0.72s; --dur-sign: 0.95s; --stagger: 0.08s; /* الظهور بالتمرير — رموز مستقلّة عن `--ease-arrive` و`--dur-arrive`، لأن هذين تستعملهما اللوحات والنوافذ والدُّرج، وتغييرهما يمسّها كلّها. المقادير مرصودة من الموقع المرجعي: صعود ٢٢ بكسل مع تصغير إلى ٩٣٪، والشفافية تصل قبل الحركة بعُشر ثانية فيبدو العنصر كأنه يستقرّ. */ --ease-reveal: cubic-bezier(0, 0, 0.5, 1); --dur-reveal: 0.8s; --dur-reveal-move: 0.9s; --rise: 22px; --reveal-scale: 0.93; --reveal-blur: 6px; /* الاستقرار البطيء: ما يتغيّر على مهل بعد أن تهدأ الصفحة */ --dur-settle: 1.6s; --dur-spring: 0.55s; /* نبض مستمرّ — دورات طويلة بما يكفي ألّا تُلِحّ على العين */ --dur-float: 4.6s; --dur-pulse: 3.4s; /* --- Aspect ratios (audit §23) ---------------------------------------- */ --ar-portrait: 9 / 16; --ar-square: 1 / 1; --ar-photo: 4 / 5; --ar-wide: 16 / 9; color-scheme: dark; } /* Light theme — measured: page rgb(240,242,244), ink rgb(20,20,21). This is the default a fresh visitor gets. */ :root[data-theme="light"] { --ink-base: hsl(240deg 2% 8%); /* التعبئة تأخذ برتقالي الشعار كما هو (#fe6603)، أما النص فيغمق إلى #b23c00 ليبلغ 5.29 على خلفية الصفحة. لونان لأن الدورين مختلفان. */ --accent: #fe6603; --accent-2: #d64500; --accent-ink: #b23c00; --on-accent: #1a0f05; --accent-warm: #ff9838; --background: #f0f2f4; --card: #e9ebee; --sheet: #ffffff; --glass: color-mix(in oklch, #ffffff 78%, transparent); --shadow-card: 0 8px 20px -16px rgba(8, 12, 20, 0.3); --shadow-show: 0 10px 24px -16px rgba(8, 12, 20, 0.28); --shadow-ibtn: 0 4px 14px -5px rgba(8, 12, 20, 0.24); color-scheme: light; } /* Arabic reading mode swaps the family and loosens the leading. */ :root[lang="ar"] { --font-sans: var(--font-ar); --leading-body: var(--leading-ar); }