/* ═══════════════════════════════════════════════════════════════
   variables.css — متغيرات CSS المشتركة · أونلاينو · فواتير
   يُستورَد من كل صفحة بدلاً من تكرار المتغيرات في كل ملف
   ═══════════════════════════════════════════════════════════════

   هوية اللون الموحّدة:
   ─────────────────────────────────────────────────────────────
   الأزرق الكحلي  #203467  → اللون الرئيسي (accent)
   الذهبي         #f6ba27  → لون ثانوي للتمييز والإجراءات
   ═══════════════════════════════════════════════════════════════ */

/* ── الوضع الداكن (افتراضي) ── */
:root,
[data-theme="dark"] {

    /* ── الأزرق الرئيسي ── */
    --accent            : #4a6db5;
    --accent-light      : #6e90cc;
    --accent-dim        : rgba(32,52,103,0.18);
    --accent-border     : rgba(74,109,181,0.40);
    --accent-strong     : rgba(74,109,181,0.65);

    /* ── الذهبي (ثانوي) ── */
    --gold              : #f6ba27;
    --gold-light        : #ffd86e;
    --gold-dim          : rgba(246,186,39,0.10);
    --gold-border       : rgba(246,186,39,0.35);

    /* ── خلفيات ── */
    --bg-deep           : #0a0e1a;
    --bg-card           : #111827;
    --bg-surface        : #1a2235;
    --bg-header         : #152040;
    --bg-mid            : #0d1525;

    /* ── نصوص ── */
    --text              : #e8edf5;
    --text-secondary    : rgba(232,237,245,0.50);
    --muted             : rgba(232,237,245,0.50);

    /* ── حدود ── */
    --border            : rgba(74,109,181,0.20);
    --border-strong     : rgba(74,109,181,0.45);
    --row-border        : rgba(74,109,181,0.14);

    /* ── حقول الإدخال ── */
    --input-bg          : rgba(255,255,255,0.05);
    --input-focus       : rgba(74,109,181,0.50);
    --input-shadow      : rgba(74,109,181,0.10);
    --input-focus-border: rgba(74,109,181,0.50);
    --input-focus-shadow: rgba(74,109,181,0.10);

    /* ── الظل ── */
    --card-shadow       : 0 20px 50px rgba(0,0,0,0.60);

    /* ── الجدول ── */
    --tbl-header        : #203467;
    --row-alt           : rgba(32,52,103,0.08);
    --row-bg            : rgba(0,5,14,0.35);

    /* ── ألوان الحالات ── */
    --green             : #3fb950;
    --green-dim         : rgba(63,185,80,0.08);
    --green-border      : rgba(63,185,80,0.28);
    --green-bg          : rgba(63,185,80,0.10);

    --orange            : #f0883e;
    --orange-dim        : rgba(240,136,62,0.08);
    --orange-border     : rgba(240,136,62,0.28);
    --orange-bg         : rgba(240,136,62,0.10);

    --red               : #eb5757;
    --red-dim           : rgba(235,87,87,0.08);
    --red-border        : rgba(235,87,87,0.28);
    --err-bg            : rgba(235,87,87,0.08);
    --err-border        : rgba(235,87,87,0.30);
    --err-color         : #eb8f8f;

    --blue              : #58a6ff;
    --blue-dim          : rgba(88,166,255,0.08);
    --blue-border       : rgba(88,166,255,0.28);

    /* ── واجهة متفرقة ── */
    --modal-bg          : rgba(0,0,0,0.72);
    --toast-bg          : #1a2235;
    --toast-border      : rgba(74,109,181,0.40);
    --toggle-bg         : rgba(74,109,181,0.10);
    --toggle-border     : rgba(74,109,181,0.35);
    --toggle-color      : #6e90cc;
    --grid-c            : rgba(74,109,181,0.04);
    --orb-c             : rgba(74,109,181,0.06);

    /* ── خلفية البطاقة (gradient) ── */
    --card-bg           : linear-gradient(160deg,#1a2235,#111827);
    --login-card-bg     : linear-gradient(160deg,#1a2235,#111827);

    /* ── micro-interactions موحّدة ── */
    --transition-btn    : all 0.22s cubic-bezier(0.22,1,0.36,1);
    --hover-lift        : translateY(-2px);
    --hover-lift-sm     : translateY(-1px);

    /* ── skeleton shimmer ── */
    --skeleton-base     : rgba(74,109,181,0.08);
    --skeleton-shine    : rgba(74,109,181,0.18);

    /* ── toast ألوان حسب النوع ── */
    --toast-success-bg  : rgba(63,185,80,0.13);
    --toast-success-bdr : rgba(63,185,80,0.38);
    --toast-warn-bg     : rgba(240,136,62,0.13);
    --toast-warn-bdr    : rgba(240,136,62,0.38);
    --toast-err-bg      : rgba(235,87,87,0.13);
    --toast-err-bdr     : rgba(235,87,87,0.38);

    /* ── شريط الحالة الجانبي ── */
    --stripe-paid       : #3fb950;
    --stripe-pending    : #f0883e;
    --stripe-sent       : #4a6db5;
    --stripe-cancelled  : #eb5757;
}

/* ── الوضع الفاتح ── */
[data-theme="light"] {

    --accent            : #203467;
    --accent-light      : #3c5499;
    --accent-dim        : rgba(32,52,103,0.07);
    --accent-border     : rgba(32,52,103,0.30);
    --accent-strong     : rgba(32,52,103,0.55);

    --gold              : #b8860b;
    --gold-light        : #d4a017;
    --gold-dim          : rgba(212,160,23,0.08);
    --gold-border       : rgba(212,160,23,0.30);

    --bg-deep           : #f0f3f9;
    --bg-card           : #ffffff;
    --bg-surface        : #e8edf8;
    --bg-header         : #dce4f2;
    --bg-mid            : #edf0f7;

    --text              : #0d1525;
    --text-secondary    : rgba(13,21,37,0.52);
    --muted             : rgba(13,21,37,0.52);

    --border            : rgba(32,52,103,0.15);
    --border-strong     : rgba(32,52,103,0.40);
    --row-border        : rgba(32,52,103,0.12);

    --input-bg          : rgba(255,255,255,0.95);
    --input-focus       : rgba(32,52,103,0.40);
    --input-shadow      : rgba(32,52,103,0.08);
    --input-focus-border: rgba(32,52,103,0.40);
    --input-focus-shadow: rgba(32,52,103,0.08);

    --card-shadow       : 0 4px 20px rgba(0,0,0,0.08);

    --tbl-header        : #203467;
    --row-alt           : rgba(32,52,103,0.03);
    --row-bg            : rgba(255,255,255,0.70);

    --green             : #1a7f37;
    --green-dim         : rgba(26,127,55,0.06);
    --green-border      : rgba(26,127,55,0.28);
    --green-bg          : rgba(26,127,55,0.08);

    --orange            : #953b00;
    --orange-dim        : rgba(149,59,0,0.06);
    --orange-border     : rgba(149,59,0,0.28);
    --orange-bg         : rgba(149,59,0,0.08);

    --red               : #a02020;
    --red-dim           : rgba(160,32,32,0.06);
    --red-border        : rgba(160,32,32,0.28);
    --err-bg            : rgba(192,57,43,0.07);
    --err-border        : rgba(192,57,43,0.28);
    --err-color         : #a02020;

    --blue              : #1a4a9e;
    --blue-dim          : rgba(26,74,158,0.06);
    --blue-border       : rgba(26,74,158,0.28);

    --modal-bg          : rgba(28,35,48,0.55);
    --toast-bg          : #ffffff;
    --toast-border      : rgba(32,52,103,0.35);
    --toggle-bg         : rgba(255,255,255,0.88);
    --toggle-border     : rgba(32,52,103,0.30);
    --toggle-color      : #203467;
    --grid-c            : rgba(32,52,103,0.05);
    --orb-c             : rgba(32,52,103,0.06);

    --card-bg           : linear-gradient(160deg,#ffffff,#f0f3f9);
    --login-card-bg     : linear-gradient(160deg,#ffffff,#f0f3f9);

    /* ── micro-interactions موحّدة ── */
    --transition-btn    : all 0.22s cubic-bezier(0.22,1,0.36,1);
    --hover-lift        : translateY(-2px);
    --hover-lift-sm     : translateY(-1px);

    /* ── skeleton shimmer ── */
    --skeleton-base     : rgba(32,52,103,0.06);
    --skeleton-shine    : rgba(32,52,103,0.14);

    /* ── toast ألوان حسب النوع ── */
    --toast-success-bg  : rgba(26,127,55,0.10);
    --toast-success-bdr : rgba(26,127,55,0.35);
    --toast-warn-bg     : rgba(149,59,0,0.09);
    --toast-warn-bdr    : rgba(149,59,0,0.32);
    --toast-err-bg      : rgba(160,32,32,0.09);
    --toast-err-bdr     : rgba(160,32,32,0.32);

    /* ── شريط الحالة الجانبي ── */
    --stripe-paid       : #1a7f37;
    --stripe-pending    : #953b00;
    --stripe-sent       : #203467;
    --stripe-cancelled  : #a02020;
}