/* ================================================================
   01 — الرموز التصميمية (Design Tokens)
   مؤسسة انسان حالم الرياضية — اتجاه «الديوان»

   هذا الملف هو المصدر الوحيد لكل قيمة تصميمية في المنصة.
   لا يحتوي أي قاعدة تخصّ مكوّناً بعينه — متغيّرات وإعادة تعيين فقط.

   قاعدة: لا تكتب لوناً أو مسافة أو مدة زمنية مباشرةً في أي ملف آخر.

   ----------------------------------------------------------------
   الوضعان — فاتح (الافتراضي) وليلي تحت [data-theme="dark"]:

   «الديوان» الفاتح: ورقٌ دافئ وحبرٌ بنفسجي، حدودٌ رفيعة وظلالٌ شبه
   معدومة — الوقار من الطباعة والفراغ لا من الألوان.
   «ليل الديوان»: كحليٌّ دافئ، حبرٌ فاتح، لافندر للتفاعل — سكينةُ
   مكتبةٍ ليلاً، لا نيون.

   عهدُ المالك المقيس (٢٠٢٦-٠٨-١١): خلفية غامقة ⟵ نصٌّ فاتح دائماً.
   يحرسه ``tests/test_theme.py`` بحساب تباين WCAG من هذا الملف نفسه —
   فقيمةٌ تكسر ٤٫٥:١ للنص الأساسي تكسر الحزمة، هنا لا في عين مستخدم.
   ================================================================ */

:root {
    color-scheme: light;

    /* ============================================================
       1) ألوان الهوية — حبر الديوان
       ============================================================ */
    --primary: #46207F;
    --primary-dark: #351768;
    --primary-darker: #241C38;
    --primary-light: #6B4AA3;
    --primary-lighter: #EFE9F8;
    --primary-tint: #F7F4FC;

    --mint: #63D2C9;
    --mint-dark: #3FA79D;
    --mint-darker: #2B7F77;
    --mint-light: #A8ECE5;
    --mint-tint: #EFFBF9;

    /* ============================================================
       2) النبرات الدلالية — مدفّأة لتجاور الورق
       ============================================================ */
    --tone-critical: #D14954;
    --tone-critical-strong: #B23440;
    --tone-critical-soft: #FBF1EF;
    --tone-critical-line: #F1D3D3;

    --tone-warning: #C98A1F;
    --tone-warning-strong: #A66F12;
    --tone-warning-soft: #FAF4E6;
    --tone-warning-line: #EBDCB4;

    --tone-positive: #2E8F73;
    --tone-positive-strong: #226E58;
    --tone-positive-soft: #EDF6F1;
    --tone-positive-line: #C4E2D6;

    --tone-info: #6B4AA3;
    --tone-info-strong: #46207F;
    --tone-info-soft: #F2EEF9;
    --tone-info-line: #DCD2ED;

    --tone-neutral: #6E6786;
    --tone-neutral-strong: #4C4661;
    --tone-neutral-soft: #F4F2EE;
    --tone-neutral-line: #E2DDD0;

    --tone-honor: #B9861F;
    --tone-honor-soft: #FAF3E3;
    --tone-honor-line: #E9D9AC;

    /* ============================================================
       3) الأسطح والنصوص — ورقٌ وحبر
       ============================================================ */
    --bg-body: #FAF8F3;
    --bg-surface: #FFFFFF;
    --bg-sunken: #F2EFE7;

    --text-strong: #241C38;
    --text-body: #3A3450;
    --text-muted: #6E6786;
    --text-faint: #A29CB5;
    --text-on-dark: #FFFFFF;

    --border-subtle: #EDE9DF;
    --border-default: #E2DDD0;
    --border-strong: #CBC4B4;

    /* ============================================================
       3-ب) الشريط العلوي — مجموعته الخاصة

       كان الشريط أبيضَ مكتوباً حرفياً (rgba(255,255,255,…)) فوق
       بنفسجي ثابت، فلا سبيل لوضعٍ ليلي بلا توكنز تخصّه. القاعدة
       في 02-base تقرأ هذه فيتبدّل الشريط مع الوضع تلقائياً.
       ============================================================ */
    --nav-bg: #FFFDF9;
    --nav-border: var(--border-default);
    --nav-text: var(--text-body);
    --nav-text-strong: var(--text-strong);
    --nav-hover-bg: var(--bg-sunken);
    --nav-active-bg: var(--primary-lighter);
    --nav-active-text: var(--primary-dark);
    --nav-shadow: 0 1px 0 rgba(36, 28, 56, 0.05);

    /* الزر النعناعي والبلاطة البارزة — توكنز خاصة، لأن «غامق الهوية»
       (primary-dark) ينقلب لافندرَ فاتحاً في الليل فيغسل نصّاً أبيض:
       أول خرقين لعهد التباين التقطتهما لقطات هذا البند نفسها. */
    --btn-mint-bg: var(--mint);
    --btn-mint-fg: #143D38;
    --btn-mint-hover-bg: var(--mint-darker);
    --btn-mint-hover-fg: #FFFFFF;

    /* نصٌّ فوق تعبئةٍ لونية (أزرار ممتلئة، شارات صلبة): أبيضُ على
       الحبر العميق نهاراً — وحبرٌ داكن ليلاً لأن التعبئات تصير باستيل
       فاتحاً. أربعة عشر موضعاً كانت تكتب text-on-dark وتنتظر الليل. */
    --on-accent: #FFFFFF;

    /* حقول الإدخال: ورقُ كتابةٍ أدفأ من سطح البطاقة بدرجة */
    --field-bg: #FFFDF9;

    /* خطُّ رأس الجدول — توقيع الديوان التحريري: حبرٌ تحت العناوين */
    --thead-line: var(--text-strong);

    --hero-bg: var(--primary-dark);
    --hero-fg: #FFFFFF;
    --hero-fg-soft: rgba(255, 255, 255, 0.72);
    --hero-hint: rgba(255, 255, 255, 0.6);
    --hero-icon-bg: rgba(255, 255, 255, 0.14);
    --hero-icon-fg: var(--mint-light);

    /* ============================================================
       4) مقياس الخط — Tajawal (محلي منذ اعتماد الديوان)
       ============================================================ */
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-num: 2.5rem;

    --lh-tight: 1.2;
    --lh-heading: 1.35;
    --lh-body: 1.75;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    --fw-black: 800;

    --ls-heading: -0.01em;

    /* ============================================================
       5) مقياس المسافات — أساس 4px
       ============================================================ */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    --pad-card: var(--sp-5);
    --pad-card-sm: var(--sp-4);

    /* ============================================================
       6) الانحناء — الديوان أهدأ انحناءً من سلفه
       ============================================================ */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-full: 999px;

    /* ============================================================
       7) الارتفاع — الديوان مسطّح: خيط ظلٍّ لا طبقات عائمة

       البطاقة تتمايز بحدّها الرفيع لا بظلها؛ العائم وحده (نوافذ،
       قوائم منسدلة) يحمل ظلاً حقيقياً.
       ============================================================ */
    --e-0: none;
    --e-1: 0 1px 0 rgba(36, 28, 56, 0.06);
    --e-2: 0 1px 2px rgba(36, 28, 56, 0.05),
           0 4px 14px rgba(36, 28, 56, 0.06);
    --e-float: 0 8px 20px rgba(36, 28, 56, 0.10),
               0 24px 48px rgba(36, 28, 56, 0.12);

    /* ============================================================
       8) الحركة — «جميل وبسيط» بطلب المالك
       ============================================================ */
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 340ms;
    --dur-deliberate: 900ms;

    --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
    --ease-in: cubic-bezier(0.4, 0, 0.7, 0.2);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --stagger-step: 40ms;

    /* ============================================================
       9) أبعاد ثابتة
       ============================================================ */
    --avatar-xs: 32px;
    --avatar-sm: 40px;
    --avatar-md: 50px;
    --avatar-lg: 64px;
    --avatar-xl: 96px;

    --icon-chip: 38px;
    --edge-accent: 3px;
    --container-max: 1240px;

    /* ============================================================
       10) سقف القوائم — الصفحة لا تطول بلا نهاية
       (الحساب موثّق في تاريخ git لهذا الملف)
       ============================================================ */
    --list-max-h: 25rem;
    --grid-max-h: 42rem;

    /* ظلّ حافّة القصّ — **يقول «تحته المزيد» ولا يكذب**.
       كانت القائمة تُقصّ صامتةً: يقرأ المالك «الأندية المسجَّلة (8)»
       ويرى ستّاً فيظنّ أن اثنين ضاعا من قاعدته. ولم يظهر العطل قبل أن
       تمتلئ القاعدة، لأن قائمةً أقصر من السقف لا تُقصّ أصلاً. */
    --scroll-fade: rgba(38, 22, 66, 0.28);
}

/* ================================================================
   ليل الديوان — [data-theme="dark"]

   تُقلب ألوان الأسطح والنصوص والحدود والنبرات وحدها؛ المقاييس
   (خط، مسافات، انحناء، حركة) ثابتة بين الوضعين عمداً: الوضع
   الليلي لونٌ آخر لا موقعاً آخر.
   ================================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --primary: #A98FD6;
    --primary-dark: #BFA9E3;
    --primary-darker: #F0EBF7;
    --primary-light: #8F73C2;
    --primary-lighter: #322A45;
    --primary-tint: #262033;

    --mint: #63D2C9;
    --mint-dark: #7ADDD5;
    --mint-darker: #99E7E0;
    --mint-light: #35998F;
    --mint-tint: #1C3733;

    --tone-critical: #F07883;
    --tone-critical-strong: #F59AA2;
    --tone-critical-soft: #3A2530;
    --tone-critical-line: #5C3644;

    --tone-warning: #E8B05C;
    --tone-warning-strong: #F0C480;
    --tone-warning-soft: #382E1E;
    --tone-warning-line: #5A4A2E;

    --tone-positive: #5BBFA0;
    --tone-positive-strong: #7FD0B7;
    --tone-positive-soft: #1E332C;
    --tone-positive-line: #2F5246;

    --tone-info: #A98FD6;
    --tone-info-strong: #BFA9E3;
    --tone-info-soft: #2C2439;
    --tone-info-line: #463A5C;

    --tone-neutral: #9A92AF;
    --tone-neutral-strong: #B8B1C9;
    --tone-neutral-soft: #262230;
    --tone-neutral-line: #3A3548;

    --tone-honor: #D9B15C;
    --tone-honor-soft: #352C1B;
    --tone-honor-line: #55482E;

    --bg-body: #17131F;
    --bg-surface: #201B2B;
    --bg-sunken: #131019;

    --text-strong: #F0EBF7;
    --text-body: #C9C2D8;
    --text-muted: #9A92AF;
    --text-faint: #6A6380;
    --text-on-dark: #F0EBF7;

    --border-subtle: #2C2639;
    --border-default: #363046;
    --border-strong: #4A4260;

    /* الظلّ في الليل أعمق: تدرّجٌ فاتحُ الشدّة يختفي على أرضيةٍ داكنة */
    --scroll-fade: rgba(0, 0, 0, 0.70);

    --nav-bg: #1C1726;
    --nav-border: var(--border-default);
    --nav-text: var(--text-body);
    --nav-text-strong: var(--text-strong);
    --nav-hover-bg: #262033;
    --nav-active-bg: var(--primary-lighter);
    --nav-active-text: var(--primary-dark);
    --nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);

    /* النعناعي يبقى فاتحاً في الليل ⟵ حبرُه داكنٌ دائماً؛ والبلاطة
       البارزة سطحٌ بنفسجي معتم لا لافندر مغسول. */
    --btn-mint-bg: var(--mint);
    --btn-mint-fg: #10312D;
    --btn-mint-hover-bg: var(--mint-dark);
    --btn-mint-hover-fg: #10312D;

    --on-accent: #191424;
    --field-bg: var(--bg-sunken);
    --thead-line: var(--border-strong);

    --hero-bg: #2E2540;
    --hero-fg: #F0EBF7;
    --hero-fg-soft: rgba(240, 235, 247, 0.72);
    --hero-hint: rgba(240, 235, 247, 0.6);
    --hero-icon-bg: rgba(240, 235, 247, 0.10);
    --hero-icon-fg: var(--mint);

    --e-1: 0 1px 0 rgba(0, 0, 0, 0.35);
    --e-2: 0 1px 2px rgba(0, 0, 0, 0.3),
           0 4px 14px rgba(0, 0, 0, 0.35);
    --e-float: 0 8px 20px rgba(0, 0, 0, 0.45),
               0 24px 48px rgba(0, 0, 0, 0.55);
}

/* ================================================================
   ربط متغيّرات Bootstrap — يتبع الوضعين تلقائياً لأن أغلبه var()

   القيم الرقمية (*-rgb) وحدها حرفية، فتُعاد كتابتها في الليلي.
   ================================================================ */
:root {
    --bs-primary: var(--primary);
    --bs-primary-rgb: 70, 32, 127;

    --bs-danger: var(--tone-critical);
    --bs-danger-rgb: 209, 73, 84;

    --bs-warning: var(--tone-warning);
    --bs-warning-rgb: 201, 138, 31;

    --bs-success: var(--tone-positive);
    --bs-success-rgb: 46, 143, 115;

    --bs-info: var(--tone-info);
    --bs-info-rgb: 107, 74, 163;

    --bs-secondary: var(--tone-neutral);
    --bs-secondary-rgb: 110, 103, 134;

    --bs-light: var(--bg-sunken);
    --bs-light-rgb: 242, 239, 231;

    --bs-body-color: var(--text-body);
    --bs-body-bg: var(--bg-body);
    --bs-body-font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    --bs-body-line-height: var(--lh-body);

    /* **القائمة المنسدلة سطحٌ مرتفع لا أرضية.** كانت تأخذ ``--bs-body-bg``
       أي لون الصفحة نفسه، فتُرسم بلون ما تحتها ولا يفصلها إلا حدٌّ خافت —
       فتُقرأ وكأنها شفّافة، ويضيع فيها «تسجيل الخروج». والتفريق موجودٌ في
       النظام أصلاً: ``--bg-surface`` للبطاقات و``--bg-body`` للأرضية. */
    --bs-dropdown-bg: var(--bg-surface);

    --bs-border-color: var(--border-default);
    --bs-border-radius: var(--r-sm);
    --bs-border-radius-sm: var(--r-xs);
    --bs-border-radius-lg: var(--r-md);

    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary-dark);
    --bs-link-color-rgb: 70, 32, 127;

    --bs-emphasis-color: var(--text-strong);
    --bs-secondary-color: var(--text-muted);
}

[data-theme="dark"] {
    --bs-primary-rgb: 169, 143, 214;
    --bs-danger-rgb: 240, 120, 131;
    --bs-warning-rgb: 232, 176, 92;
    --bs-success-rgb: 91, 191, 160;
    --bs-info-rgb: 169, 143, 214;
    --bs-secondary-rgb: 154, 146, 175;
    --bs-light-rgb: 19, 16, 25;
    --bs-link-color-rgb: 169, 143, 214;
}

/* ================================================================
   إعادة تعيين أساسية
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--text-body);
    background-color: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--primary-lighter);
    color: var(--primary-dark);
}

@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-sunken);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: var(--r-full);
        border: 2px solid var(--bg-sunken);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary-light);
    }
}