/* ============================================================================
   TOKENS — طبقة الأساس للتصميم (المصدر الوحيد للحقيقة)
   ----------------------------------------------------------------------------
   • كل لون/مسافة/ظل/حجم خط في النظام يُشتق من هنا.
   • لا تكتب قيمة لون صلبة في أي ملف CSS آخر — استخدم متغيّراً من هذا الملف.
   • الاتجاه البصري: هادئ، احترافي، تباين عالٍ، بلا مبالغة.
   • الهوية: برتقالي الشعار #C55A11 + كحلي الشعار #2C313F.
   ============================================================================ */

/* ── 1. الخط العربي (IBM Plex Sans Arabic — مستضاف محلياً) ────────────────── */
/* الشريحتان العربية واللاتينية فقط؛ المتصفح ينزّل ما يحتاجه عبر unicode-range */

@font-face {
    font-family: 'Plex Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/plex/plex-ar-400-arabic.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;
}

@font-face {
    font-family: 'Plex Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/plex/plex-ar-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plex Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/plex/plex-ar-500-arabic.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;
}

@font-face {
    font-family: 'Plex Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/plex/plex-ar-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plex Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/plex/plex-ar-600-arabic.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;
}

@font-face {
    font-family: 'Plex Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/plex/plex-ar-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plex Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/plex/plex-ar-700-arabic.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;
}

@font-face {
    font-family: 'Plex Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/plex/plex-ar-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 2. الرموز الأولية (Primitives) — لا تُستخدم مباشرة في المكوّنات ──────── */

:root {
    /* البرتقالي — لون الشعار */
    --c-brand-50:  #fdf4ed;
    --c-brand-100: #fae4d2;
    --c-brand-200: #f4c5a2;
    --c-brand-300: #eda06e;
    --c-brand-400: #e37c3e;
    --c-brand-500: #c55a11;  /* الأساس — لون الشعار */
    --c-brand-600: #ab4c0d;
    --c-brand-700: #8a3d0c;
    --c-brand-800: #6d310e;
    --c-brand-900: #58290f;

    /* الرمادي — محايد دافئ قليلاً ليتناغم مع البرتقالي */
    --c-gray-0:   #ffffff;
    --c-gray-25:  #fbfbfc;
    --c-gray-50:  #f6f7f9;
    --c-gray-100: #eef0f3;
    --c-gray-200: #e2e5ea;
    --c-gray-300: #cbd0d8;
    --c-gray-400: #9aa2ae;
    --c-gray-500: #6b7483;
    --c-gray-600: #515966;
    --c-gray-700: #3d444f;
    --c-gray-800: #2c313f;  /* كحلي الشعار */
    --c-gray-900: #1e222c;
    --c-gray-950: #14171e;

    /* ألوان الحالة — مضبوطة على تباين AA مع الأبيض */
    --c-green-50:  #ecfdf3;  --c-green-500: #12864e;  --c-green-600: #0f7043;
    --c-amber-50:  #fffaeb;  --c-amber-500: #b25e09;  --c-amber-600: #93500b;
    --c-red-50:    #fef3f2;  --c-red-500:   #c8322b;  --c-red-600:   #a92823;
    --c-blue-50:   #eff6ff;  --c-blue-500:  #1f6fd4;  --c-blue-600:  #175bb0;
}

/* ── 3. الرموز الدلالية (Semantic) — هذه ما تستخدمه المكوّنات ─────────────── */

:root {
    /* الأسطح */
    --bg:            var(--c-gray-50);   /* خلفية الصفحة */
    --surface:       var(--c-gray-0);    /* البطاقات واللوحات */
    --surface-2:     var(--c-gray-25);   /* سطح ثانوي/مخطط */
    --surface-3:     var(--c-gray-100);  /* رؤوس الجداول، مناطق مطفأة */
    --surface-inset: var(--c-gray-50);   /* حقول الإدخال، مناطق غائرة */

    /* النص */
    --text:        var(--c-gray-900);
    --text-2:      var(--c-gray-700);    /* نص ثانوي */
    --text-muted:  var(--c-gray-500);    /* تسميات، تلميحات */
    --text-subtle: var(--c-gray-400);    /* عناصر نائبة */
    --text-invert: var(--c-gray-0);

    /* الحدود — العمود الفقري للتصميم عالي التباين */
    --border:        var(--c-gray-200);
    --border-strong: var(--c-gray-300);
    --border-subtle: var(--c-gray-100);

    /* اللون المميّز */
    --accent:          var(--c-brand-500);
    --accent-hover:    var(--c-brand-600);
    --accent-active:   var(--c-brand-700);
    --accent-soft:     var(--c-brand-50);   /* خلفية خفيفة */
    --accent-soft-brd: var(--c-brand-200);
    --accent-text:     var(--c-brand-700);  /* نص برتقالي مقروء على أبيض */
    --accent-on:       #ffffff;             /* النص فوق اللون المميّز */
    --accent-ring:     rgba(197, 90, 17, .28);

    /* الحالات */
    --ok:      var(--c-green-500);  --ok-soft:   var(--c-green-50);  --ok-text:   var(--c-green-600);
    --warn:    var(--c-amber-500);  --warn-soft: var(--c-amber-50);  --warn-text: var(--c-amber-600);
    --danger:  var(--c-red-500);    --danger-soft: var(--c-red-50);  --danger-text: var(--c-red-600);
    --info:    var(--c-blue-500);   --info-soft: var(--c-blue-50);   --info-text: var(--c-blue-600);

    /* الشريط الجانبي — موحّد مع هوية الشعار */
    --sb-bg:     var(--c-gray-800);
    --sb-bg-2:   var(--c-gray-900);
    --sb-accent: var(--c-brand-400);
    --sb-text:   rgba(255, 255, 255, .82);
    --sb-dim:    rgba(255, 255, 255, .45);
    --sb-hover:  rgba(255, 255, 255, .06);
    --sb-active: rgba(227, 124, 62, .16);
    --sb-border: rgba(255, 255, 255, .09);
}

/* ── 4. المقاييس (لا تتغيّر مع الثيم) ────────────────────────────────────── */

:root {
    /* الخط */
    --font-sans: 'Plex Arabic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
    /* أرقام جدولية: تمنع رقص الأرقام في الجداول والعدّادات */
    --num: 'tnum' 1, 'lnum' 1;

    --fs-xs:   .75rem;    /* 12px @16 */
    --fs-sm:   .8125rem;  /* 13px */
    --fs-base: .875rem;   /* 14px — نص الواجهة الافتراضي */
    --fs-md:   .9375rem;  /* 15px */
    --fs-lg:   1.0625rem; /* 17px */
    --fs-xl:   1.25rem;   /* 20px */
    --fs-2xl:  1.5rem;    /* 24px */
    --fs-3xl:  1.875rem;  /* 30px — أرقام KPI */

    --lh-tight: 1.25;
    --lh-base:  1.6;      /* العربية تحتاج ارتفاع سطر أعلى من اللاتينية */

    /* المسافات — سلّم 4px */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;  --sp-12: 48px;

    /* أنصاف الأقطار — معتدلة، لا كبسولات */
    --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-pill: 999px;

    /* الظلال — خفيفة جداً؛ الحدود تقوم بالعمل الأكبر */
    --sh-xs: 0 1px 2px rgba(20, 23, 30, .05);
    --sh-sm: 0 1px 3px rgba(20, 23, 30, .07), 0 1px 2px rgba(20, 23, 30, .04);
    --sh-md: 0 4px 12px -2px rgba(20, 23, 30, .10), 0 2px 4px -2px rgba(20, 23, 30, .05);
    --sh-lg: 0 12px 28px -6px rgba(20, 23, 30, .14), 0 4px 8px -4px rgba(20, 23, 30, .06);
    --sh-pop: 0 16px 40px -8px rgba(20, 23, 30, .20);

    /* الحركة — سريعة ومحسوسة، بلا استعراض */
    --t-fast: 110ms;
    --t-base: 160ms;
    --t-slow: 240ms;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* طبقات z */
    --z-sticky: 20;
    --z-sidebar: 1040;
    --z-overlay: 1050;
    --z-modal: 1060;
    --z-toast: 1090;

    /* تخطيط */
    --sb-width: 260px;
    --sb-mini: 64px;
}

/* ── 5. الكثافة — بديل zoom:0.9 المحذوفة ─────────────────────────────────── */
/* المستخدم يختار الكثافة؛ كل شيء مبني على rem فيتبعها تلقائياً */

html                          { font-size: 15px; }   /* مريح (افتراضي) */
html[data-density="compact"]  { font-size: 13.5px; } /* مضغوط — بيانات أكثر بالشاشة */
html[data-density="cozy"]     { font-size: 16px; }   /* واسع */

/* ── 6. الوضع الداكن — جاهز، يُفعَّل بـ data-theme="dark" على <html> ──────── */

:root[data-theme="dark"] {
    --bg:            var(--c-gray-950);
    --surface:       #1a1e27;
    --surface-2:     #20242f;
    --surface-3:     #272c38;
    --surface-inset: #171a22;

    --text:        #e8eaee;
    --text-2:      #c2c7d0;
    --text-muted:  #8e96a4;
    --text-subtle: #6b7483;
    --text-invert: var(--c-gray-950);

    --border:        #2f3542;
    --border-strong: #3d4453;
    --border-subtle: #262b35;

    --accent:          var(--c-brand-400);
    --accent-hover:    var(--c-brand-300);
    --accent-active:   var(--c-brand-200);
    --accent-soft:     rgba(227, 124, 62, .13);
    --accent-soft-brd: rgba(227, 124, 62, .30);
    --accent-text:     var(--c-brand-300);
    --accent-on:       #1a1207;
    --accent-ring:     rgba(227, 124, 62, .35);

    --ok:     #34b877;  --ok-soft:     rgba(52, 184, 119, .13);  --ok-text:     #5fcf95;
    --warn:   #d99022;  --warn-soft:   rgba(217, 144, 34, .13);  --warn-text:   #e8ab4d;
    --danger: #e05a52;  --danger-soft: rgba(224, 90, 82, .13);   --danger-text: #ef8079;
    --info:   #4f95e8;  --info-soft:   rgba(79, 149, 232, .13);  --info-text:   #7fb2f0;

    --sb-bg:   var(--c-gray-950);
    --sb-bg-2: #101319;

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --sh-sm: 0 1px 3px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30);
    --sh-md: 0 4px 12px -2px rgba(0, 0, 0, .48), 0 2px 4px -2px rgba(0, 0, 0, .32);
    --sh-lg: 0 12px 28px -6px rgba(0, 0, 0, .55), 0 4px 8px -4px rgba(0, 0, 0, .35);
    --sh-pop: 0 16px 40px -8px rgba(0, 0, 0, .65);

    color-scheme: dark;
}

/* ── 7. الطباعة — تُجبَر على الوضع الفاتح دائماً (راجع #78-هـ) ───────────── */

@media print {
    :root, :root[data-theme="dark"] {
        color-scheme: light !important;
        --bg: #fff;  --surface: #fff;  --surface-2: #fff;  --surface-3: #f2f2f2;
        --text: #000;  --text-2: #222;  --text-muted: #444;
        --border: #999;  --border-strong: #666;  --border-subtle: #bbb;
        --sh-xs: none;  --sh-sm: none;  --sh-md: none;  --sh-lg: none;  --sh-pop: none;
    }
    html { font-size: 12.5px; }
}

/* ── 8. احترام تفضيل تقليل الحركة ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}