/* =====================================================
   متغيّرات التصميم - Design System Tokens
   هويّة بصرية: علم شرعي عصري - أناقة ذهبية
   ===================================================== */

:root {
    /* الألوان الأساسية - Primary Palette */
    --color-emerald-deep: #0a3d2e;
    --color-emerald-mid: #0f5340;
    --color-emerald-light: #2d7a5f;

    --color-gold-bright: #d4af37;
    --color-gold-soft: #c9a961;
    --color-gold-deep: #8b6914;
    --color-gold-shimmer: #e8c574;

    --color-bronze: #7d5a35;
    --color-cream: #faf7f0;
    --color-cream-warm: #f5efe1;
    --color-cream-mist: #fefcf6;

    --color-ink-deep: #1a1410;
    --color-ink-warm: #2d231b;
    --color-ink-soft: #5a4f47;
    /* كان #8b7d72 وتباينه ٣٫٧٢:١ على الكريمي — دون الحدّ المقبول (٤٫٥)
       وهو حاملُ كل النصوص الصغيرة: بيانات البطاقات وعناوين الفلاتر. */
    --color-ink-mist: #6b5f55;

    --color-border-light: #e8e0d0;
    --color-border-mid: #d4c8b3;

    /* ألوان الحالة - Status Colors */
    --color-success: #2d8a5f;
    --color-warning: #d4a054;
    --color-danger: #c0392b;
    --color-info: #4a7c8e;

    /* الخلفيات - Backgrounds */
    --bg-page: var(--color-cream);
    --bg-card: #ffffff;
    --bg-card-hover: #fefcf6;
    --bg-elevated: #ffffff;
    --bg-overlay: rgba(26, 20, 16, 0.65);
    --bg-overlay-deep: rgba(10, 61, 46, 0.85);

    /* النصوص - Typography Colors */
    --text-primary: var(--color-ink-deep);
    --text-secondary: var(--color-ink-warm);
    --text-tertiary: var(--color-ink-soft);
    --text-muted: var(--color-ink-mist);
    --text-inverse: var(--color-cream);
    --text-accent: var(--color-gold-deep);

    /* الحدود - Borders */
    --border-subtle: 1px solid var(--color-border-light);
    --border-default: 1px solid var(--color-border-mid);
    --border-accent: 2px solid var(--color-gold-soft);

    /* الظلال - Shadows */
    --shadow-xs: 0 1px 2px rgba(26, 20, 16, 0.04);
    --shadow-sm: 0 2px 4px rgba(26, 20, 16, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 20, 16, 0.08);
    --shadow-lg: 0 12px 32px rgba(26, 20, 16, 0.12);
    --shadow-xl: 0 24px 56px rgba(26, 20, 16, 0.16);
    --shadow-gold: 0 8px 24px rgba(201, 169, 97, 0.25);
    --shadow-emerald: 0 8px 24px rgba(10, 61, 46, 0.2);

    /* الأبعاد - Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* الانحناءات - Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* الخطوط - Typography */
    /*
     * بدائل عربية قبل system-ui: لو تأخّر خطّ جوجل أو تعذّر الوصول إليه
     * فالنصّ يُرسم بخطّ عربي موجود على الجهاز لا بخطّ لاتيني يعرض العربية
     * بأشكال منفصلة قبيحة. «Segoe UI» على ويندوز و«Geeza Pro» على آبل
     * و«Noto Naskh» على أندرويد ولينكس.
     */
    --font-display: 'El Messiri', 'Cairo', 'Segoe UI', 'Noto Naskh Arabic', 'Geeza Pro', system-ui, sans-serif;
    --font-body: 'Cairo', 'Segoe UI', 'Noto Naskh Arabic', 'Geeza Pro', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /*
     * أحجام سائلة بـ clamp: تتدرّج مع عرض الشاشة بلا استعلام وسائط،
     * فلا يقفز النصّ قفزةً عند عتبة ولا يحتاج ضبطاً عند كل مقاس.
     *
     * كانت معرَّفة هنا بقيمٍ ثابتة ثمّ يُعيد responsive.css تعريفها
     * كلَّها في جذرٍ عارٍ — فيُميت هذه تماماً وهي أوّل ما يقرؤه من
     * يبحث عن حجم نصّ. جُمعت هنا وحُذفت هناك.
     *
     * الحدّ الأدنى لكلٍّ هو المقروء على ٣٢٠ بكسل، والأقصى هو القياس
     * السابق نفسه — فلا يتغيّر شيء على الحاسوب.
     */
    --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --text-base: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
    --text-md: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
    --text-lg: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
    --text-xl: clamp(1.2rem, 1.05rem + 0.85vw, 1.5rem);
    --text-2xl: clamp(1.4rem, 1.2rem + 1.1vw, 1.875rem);
    --text-3xl: clamp(1.65rem, 1.35rem + 1.6vw, 2.25rem);
    --text-4xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --text-5xl: clamp(2.4rem, 1.7rem + 3.5vw, 4rem);

    /*
     * سلّم نقاط الانكسار — أربعٌ لا اثنتا عشرة.
     * (CSS لا يقبل المتغيّرات داخل @media، فهذه للتوثيق لا للاستعمال؛
     *  القيم مكتوبة صراحةً، وهذه تقول أيَّها معتمد.)
     *   480  = الجوّال          768  = اللوحي
     *  1024  = الحاسوب الصغير  1440 = الواسع
     */

    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;
    --leading-loose: 2.0;

    /* الانتقالات - Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-elegant: 600ms cubic-bezier(0.16, 1, 0.3, 1);

    /* أبعاد التخطيط - Layout */
    --sidebar-width: 320px;
    --sidebar-width-collapsed: 80px;
    --header-height: 80px;
    --container-max: 1400px;
    --content-max: 1100px;

    /* z-index */
    --z-base: 1;
    --z-elevated: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 800;
    --z-modal: 900;
    --z-toast: 1000;
}