/* ==========================================================================
   DESIGN TOKENS — هوية رونكس
   ألوان مأخوذة من الموقع الرسمي ronixtools.com:
     الأحمر #ed1c24 هو لون العلامة، والرمادي الداكن #1e1e1e لون النصوص
     والهيدر، مع تدرّجات رمادية للحدود والخلفيات.
   ========================================================================== */

:root {
    /* ── ألوان العلامة ─────────────────────────────────────────────────── */
    --brand:            #ed1c24;
    --brand-dark:       #c41219;
    --brand-darker:     #a30000;
    --brand-light:      #fdecec;

    --ink:              #1e1e1e;   /* النص الأساسي والهيدر */
    --ink-2:            #3d3d3d;   /* نص ثانوي */
    --ink-3:            #6a6b6e;   /* نص خافت */
    --ink-4:            #9a9b9e;   /* تلميحات */

    --bg:               #ffffff;
    --bg-soft:          #f7f7f8;
    --bg-softer:        #fbfbfc;
    --bg-dark:          #1e1e1e;

    --line:             #e3e4e6;
    --line-strong:      #cfd0d3;

    /* ── ألوان الحالة ──────────────────────────────────────────────────── */
    --success:          #198754;
    --success-bg:       #e8f5ee;
    --warning:          #f58220;
    --warning-bg:       #fff3e6;
    --danger:           #dc3545;
    --danger-bg:        #fdecee;
    --info:             #0d6efd;
    --info-bg:          #e9f1ff;

    /* ── الخطوط ────────────────────────────────────────────────────────── */
    --font-ar: 'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', system-ui, sans-serif;
    --font-en: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 15px;
    --fs-md:   17px;
    --fs-lg:   20px;
    --fs-xl:   26px;
    --fs-2xl:  34px;
    --fs-3xl:  44px;

    /* ── المسافات ──────────────────────────────────────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* ── الحواف والظلال ────────────────────────────────────────────────── */
    --r-sm: 3px;
    --r:    6px;
    --r-lg: 10px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(16, 18, 22, .06);
    --shadow:    0 2px 10px rgba(16, 18, 22, .08);
    --shadow-lg: 0 12px 32px rgba(16, 18, 22, .14);

    --container: 1320px;
    --header-h: 64px;

    --t-fast: .15s ease;
    --t:      .25s ease;
}

/* الاتجاه: كل التنسيقات تستعمل الخصائص المنطقية (inline-start/end) فيعمل
   التصميم نفسه في RTL وLTR بلا ملف ثانٍ ولا قواعد مقلوبة. */
[dir="rtl"] { --font: var(--font-ar); }
[dir="ltr"] { --font: var(--font-en); }