/* ==========================================================================
   رموز التصميم — «رمادي رسمي وأزرق»
   أبيض وأسود وتدرّجاتهما الطبيعية، والأزرق وحده لونًا مميّزًا.
   لا يُكتب أي لون مباشرةً خارج هذا الملف.
   ========================================================================== */

/* --- الخطوط: مستضافة ذاتيًا، صفر طلبات خارجية --- */

@font-face {
    font-family: 'Alexandria';
    src: url('../fonts/Alexandria-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alexandria';
    src: url('../fonts/Alexandria-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dubai';
    src: url('../fonts/Dubai-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dubai';
    src: url('../fonts/Dubai-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dubai';
    src: url('../fonts/Dubai-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dubai';
    src: url('../fonts/Dubai-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spline Sans Mono';
    src: url('../fonts/SplineSansMono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- الوضع النهاري: رماديات محايدة، بلا أي ميل لوني --- */
    --bg: #F4F5F7;
    --surface: #FFFFFF;
    --surface-2: #FAFBFC;
    --ink: #0D0F12;
    --ink-soft: #2E333B;
    --muted: #616A76;

    /* فاصل زخرفي — معفى من اشتراط التباين. */
    --line: #E2E5E9;

    /* حدّ عناصر النماذج: ‏WCAG 2.1 SC 1.4.11 يطلب 3:1 على الأقل.
       ‏#8A929C على ‏#F4F5F7 = 3.02:1 (وعلى --surface 3.24:1). */
    --line-strong: #8A929C;

    /* --------------------------------------------------------------------
       لونا الهوية: #18DCFF و #17C0EB

       ساطعان جدًّا: تباين #18DCFF على أبيض 1.65:1، و #17C0EB 2.17:1 —
       أي أن نصًّا بأيّهما على خلفية فاتحة لا يُقرأ. لذلك يعملان هنا
       سطحًا ممتلئًا يعلوه حبر داكن (11.6:1)، والنصّ الملوَّن يأخذ
       --accent-text وهو نفس العائلة أعمق (5.95:1 على أبيض).
       -------------------------------------------------------------------- */
    --brand: #18DCFF;
    --brand-2: #17C0EB;

    --accent: #17C0EB;
    --accent-ink: #06222B;
    --accent-text: #0B6D85;
    --accent-soft: #E4F8FE;

    /* لا يظهر إلا في خطأ فعليّ. ‏#A8291F على أبيض = 6.42:1. */
    --accent-2: #A8291F;

    --nav-bg: #FFFFFF;
    --nav-ink: #0D0F12;

    /* --- الخطوط --- */
    --font-display: 'Alexandria', 'Dubai', system-ui, sans-serif;
    --font-ui: 'Dubai', system-ui, sans-serif;
    --font-mono: 'Spline Sans Mono', ui-monospace, monospace;

    /* --------------------------------------------------------------------
       الشكل: أنصاف أقطار متراكزة

       البطاقة تجلس داخل غلاف: الغلاف نصف قطره --r-shell، والقلب داخله
       نصف قطره --r-core المحسوب بطرح حشوة الغلاف. بلا هذا الطرح يبدو
       المنحنيان الداخلي والخارجي غير متمركزين، وهي أوّل علامة على
       واجهة مجمَّعة لا مصمَّمة.
       -------------------------------------------------------------------- */
    --shell-pad: 6px;
    --r-shell: 20px;
    --r-core: calc(var(--r-shell) - var(--shell-pad));
    --r-pill: 999px;
    --radius: 10px;
    --radius-lg: 14px;

    /* --------------------------------------------------------------------
       الحدود: شعيرات منخفضة الشفافية لا رماديّ صريح

       حدّ رمادي مصمت 1px هو ما يجعل الواجهة تبدو افتراضية. الشعيرة
       المنخفضة تتكيّف مع ما تحتها وتُقرأ كحافة مادية لا كخطّ مرسوم.
       -------------------------------------------------------------------- */
    --edge: rgb(13 15 18 / 8%);
    --edge-soft: rgb(13 15 18 / 5%);
    --hairline: 1px solid var(--edge);

    /* --------------------------------------------------------------------
       الارتفاع: ظلال منتشرة واسعة لا ظلال حادّة

       طبقتان: واحدة ضيّقة تُثبت الحافة، وأخرى واسعة جدًّا ومنخفضة
       الشفافية تصنع الإحساس بأن العنصر يطفو فوق السطح لا مرسوم عليه.
       -------------------------------------------------------------------- */
    --shadow-1: 0 1px 2px rgb(13 15 18 / 4%), 0 8px 24px -12px rgb(13 15 18 / 10%);
    --shadow-2: 0 1px 2px rgb(13 15 18 / 5%), 0 18px 48px -20px rgb(13 15 18 / 16%);
    --shadow-3: 0 2px 4px rgb(13 15 18 / 6%), 0 32px 72px -28px rgb(13 15 18 / 22%);
    --lift: var(--shadow-2);

    /* لمعة داخلية علوية: تجعل السطح يبدو زجاجًا فوق صينية لا مستطيلًا مسطّحًا. */
    --sheen: inset 0 1px 0 rgb(255 255 255 / 70%);

    /* --------------------------------------------------------------------
       الحركة: منحنيات فيزيائية لا ease-in-out

       المنحنى القياسي يبدو آليًّا. هذه المنحنيات تحاكي كتلةً لها عطالة:
       تنطلق بسرعة ثم تستقرّ ببطء.
       -------------------------------------------------------------------- */
    --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-1: 180ms;
    --dur-2: 340ms;
    --dur-3: 700ms;

    /* --- المسافات --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;
    --space-9: 112px;

    /* --------------------------------------------------------------------
       القياس

       ثلاثة أرقام لا رابع لها. كل عرض في الموقع يعود إلى واحد منها،
       ولا يُكتب رقم عرض في ملف مكوّن — الحافّة التي تُقرّرها ثلاثة ملفات
       حافّةٌ تهتزّ، والقارئ يرى الاهتزاز ولا يعرف سببه.
       -------------------------------------------------------------------- */

    /* متن يُقرأ سطرًا بعد سطر. */
    --measure: 68ch;

    /* بطاقة مركَّزة ضيّقة: دخول، تسجيل. */
    --measure-card: 460px;

    /* عمود نموذج: بحث الهيرو، نماذج صاحب العمل الطويلة. */
    --measure-form: 780px;

    /* صفحة تُقرأ لا تُمسح بالنظر: أضيق من الحاصر عمدًا، لأن ترويسة
       بعرض --container فوق عمود نصّ بعرض --measure تبدو ترويسةً
       لصفحة أخرى. */
    --measure-page: 900px;

    /* عرض المحتوى الأقصى — خطّ المرجع من الترويسة إلى الفوتر. */
    --container: 1200px;

    /* اتجاه انسياب التدرّجات.
       `linear-gradient` لا يعرف المنطقيّ ولا ينقلب مع dir، فالجهة تأتي
       من هنا: النصّ في العربية يبدأ يمينًا فينتهي التدرّج يسارًا. */
    --flow-end: left;

    /* الحشو الجانبي.
       يتنفّس على الشاشة الصغيرة ويثبت عند ٢٤ على الكبيرة — وهو بالضبط
       ما تُبعده الترويسةُ نصَّها عن حافّتها (‎--shell-pad وحشو القلب).
       الترويسة هي المرجع، فيطابقها الرمز ولا يخالفها ببضعة بكسلات
       لا يعرف الناظر مصدرها. */
    --gutter: clamp(16px, 3vw, 24px);
}

[data-theme='dark'] {
    /* الوضع الليلي رماديّ محايد أيضًا — لا ميل أزرق ولا دافئ.
       ألوان التمييز تُفتَح لتعبر تباين WCAG AA على خلفية داكنة. */
    --bg: #0E1013;
    --surface: #161A1F;
    --surface-2: #1B2027;
    --ink: #F2F4F7;
    --ink-soft: #D3D8DF;
    --muted: #949CA8;
    --line: #232830;

    /* ‏#79828E على ‏#0E1013 = 4.28:1. */
    --line-strong: #79828E;

    /* على الداكن يظهر اللونان كما هما — وهو موضعهما الأمثل.
       #18DCFF على #0E1013 = 12.4:1. */
    --brand: #18DCFF;
    --brand-2: #17C0EB;

    --accent: #18DCFF;
    --accent-ink: #04191F;
    --accent-text: #18DCFF;
    --accent-soft: #0B2E38;

    /* ‏#E08078 على ‏#0E1013 = 6.18:1. */
    --accent-2: #E08078;

    --nav-bg: #161A1F;
    --nav-ink: #F2F4F7;

    /* في الداكن تُقلب المنطق: الحافة تُضيء لا تُظلم، والظلّ يشتدّ
       لأن الظلّ الخفيف لا يُرى أصلًا على خلفية سوداء. */
    --edge: rgb(255 255 255 / 9%);
    --edge-soft: rgb(255 255 255 / 6%);
    --sheen: inset 0 1px 0 rgb(255 255 255 / 6%);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 50%);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 45%), 0 18px 48px -20px rgb(0 0 0 / 60%);
    --shadow-3: 0 2px 4px rgb(0 0 0 / 50%), 0 32px 72px -28px rgb(0 0 0 / 70%);
    --lift: var(--shadow-2);
}

/*
 * الإنجليزية تنساب يسارًا فيمينًا، فينقلب طرف التدرّج معها.
 * ‏`linear-gradient` لا تعرف الخصائص المنطقية، وترك الجهة ثابتة يجعل
 * الحجاب يثقُل حيث لا نصّ ويرقّ حيث النصّ — فيُقرأ الأول ويختفي الثاني.
 */
[dir='ltr'] {
    --flow-end: right;
}