/* =====================================================================
   myoffers.live — طبقة التصميم المشتركة
   ---------------------------------------------------------------------
   ملف واحد يملك كل الألوان والخطوط والمقاسات في المشروع.

   قبل هذا الملف كان لكل صفحة كتلة :root خاصة بها — خمس نسخ تسمّي نفس
   اللون بأسماء مختلفة (--brand في لوحة الإدارة، --accent في التطبيق)،
   وبثلاث حزم خطوط مختلفة، وبنصف قطر ١٢ بكسل في صفحة و١٤ في أخرى.
   النتيجة أن الصفحات تبدو وكأنها منتجات مختلفة.

   القاعدة من الآن: الألوان والخطوط والمقاسات تُعدّل هنا فقط.
   ملف كل صفحة يحتفظ بما يخصّه وحده (مثل --topbar-height).

   الاستعمال — يوضع قبل ملف الصفحة مباشرة:
       <link rel="stylesheet" href="/shared/tokens.css">
       <link rel="stylesheet" href="admin.css">
   ===================================================================== */

:root {
    color-scheme: light dark;

    /* ---------- الهوية ---------- */
    --brand: #ff6b35;
    --brand-dark: #e85a25;
    --brand-soft: #fff5f2;

    /* البرتقالي على خلفية بيضاء تباينه 2.84:1 — أي أقل من الحد الأدنى
       المقبول للقراءة (4.5:1). يبقى #ff6b35 للتعبئة والحدود والأزرار
       الملوّنة، ويُستعمل هذا المتغيّر كلما كان اللون نصاً. */
    --brand-text: #db3a00;
    /* 4.55:1 على أبيض */

    /* ---------- النص ---------- */
    --ink: #111827;
    --ink-soft: #4b5563;
    --ink-muted: #6b7280;

    /* ---------- الأسطح ---------- */
    --surface: #ffffff;
    --surface-alt: #f8fafc;
    --page: #f4f5f7;
    --line: #e5e7eb;
    --line-strong: #d1d5db;

    /* ---------- الحالات ---------- */
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --success: #16a34a;
    --success-bg: #dcfce7;
    --warn: #b45309;
    --warn-bg: #fef3c7;
    --muted-bg: #f1f5f9;

    /* ---------- المقاسات ----------
       مقياس واحد للمشروع كله. كان 12px في لوحة الإدارة و14px في
       صفحتي الإنشاء والاشتراكات، فتظهر الأزرار بانحناءات مختلفة. */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 6px rgba(17, 24, 39, 0.04);
    --shadow: 0 4px 16px rgba(17, 24, 39, 0.06);
    --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.10);

    /* ---------- الخط ----------
       حزمة واحدة لكل الصفحات. Neo Sans Arabic أولاً إن كان مثبّتاً على
       جهاز المستخدم أو مستضافاً (انظر أسفل الملف)، ثم Tajawal، ثم خطوط
       النظام العربية. لا تضع حزمة أخرى في ملف صفحة. */
    --font: "Neo Sans Arabic", "Tajawal", "Noto Sans Arabic", "Dubai",
        "Segoe UI", Tahoma, Arial, sans-serif;

    --font-mono: "Consolas", "Courier New", ui-monospace, monospace;

    /* ---------- الحركة ---------- */
    --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --t-fast: 0.15s;
    --t: 0.2s;

    /* =================================================================
       أسماء بديلة — للتوافق مع الملفات الحالية
       -----------------------------------------------------------------
       style.css و create.css يستعملان تسمية مختلفة. بدل تعديل مئات
       السطور فيهما، تشير الأسماء القديمة إلى نفس القيم الجديدة.
       تتبع الوضع الليلي تلقائياً لأن var() تُحسب وقت الاستعمال.

       عند كتابة كود جديد استعمل الأسماء الأصلية أعلاه.
       ================================================================= */
    --accent: var(--brand);
    --accent-dark: var(--brand-dark);
    --accent-soft: var(--brand-soft);

    --bg-primary: var(--page);
    --bg-secondary: var(--surface-alt);
    --bg-card: var(--surface);

    --text-primary: var(--ink);
    --text-secondary: var(--ink-soft);
    --text-muted: var(--ink-muted);

    --border-color: var(--line);
    --border-card: var(--line-strong);

    --radius-md: var(--radius);
}

/* =====================================================================
   الوضع الليلي
   ---------------------------------------------------------------------
   كان مدعوماً في التطبيق وصفحة الإنشاء فقط. لوحة الإدارة ولوحة المدير
   العام وصفحة الاشتراكات كانت تبقى بيضاء ساطعة — وهي الصفحات التي
   يفتحها المشرف ليلاً. الآن يكفي وضع data-theme="dark" على <html>.

   الأسماء البديلة أعلاه لا تحتاج إعادة تعريف: قيمتها var() تتبع
   المتغيّر الأصلي تلقائياً.
   ===================================================================== */

[data-theme="dark"] {
    --brand-soft: #2a1710;
    --brand-text: #ff6b35;
    /* 5.97:1 على السطح الداكن */
    --danger: #e35252;
    --warn: #d8640b;

    --ink: #f3f4f6;
    --ink-soft: #d1d5db;
    --ink-muted: #9ca3af;

    --surface: #1a1d21;
    --surface-alt: #22262b;
    --page: #121417;
    --line: #2e3339;
    --line-strong: #3d434a;

    --danger-bg: #3b1616;
    --success-bg: #14301d;
    --warn-bg: #3a2c0d;
    --muted-bg: #22262b;

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
}

/* يتبع إعداد الجهاز ما لم يختر المستخدم وضعاً صراحةً */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand-soft: #2a1710;
        --brand-text: #ff6b35;
        /* 5.97:1 على السطح الداكن */
        --danger: #e35252;
        --warn: #d8640b;

        --ink: #f3f4f6;
        --ink-soft: #d1d5db;
        --ink-muted: #9ca3af;

        --surface: #1a1d21;
        --surface-alt: #22262b;
        --page: #121417;
        --line: #2e3339;
        --line-strong: #3d434a;

        --danger-bg: #3b1616;
        --success-bg: #14301d;
        --warn-bg: #3a2c0d;
        --muted-bg: #22262b;

        --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
        --shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
    }
}

/* =====================================================================
   أساسيات مشتركة
   ---------------------------------------------------------------------
   هذه القواعد كانت مكرّرة في ستة ملفات بصياغات متقاربة لا متطابقة،
   وهو سبب اختلاف الإحساس بين صفحة وأخرى.
   ===================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    direction: rtl;
}

body {
    font-family: var(--font);
    background: var(--page);
    color: var(--ink);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* الحقول بحجم 16px على الأقل، وإلا كبّر iPhone الصفحة تلقائياً عند
   الضغط على أي حقل — وهو أكثر ما يزعج المشرف على الهاتف */
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: 16px;
    color: inherit;
}

/* مؤشّر تركيز واضح للوحة المفاتيح، دون إظهاره لمن يستعمل الفأرة */
:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* احترام إعداد "تقليل الحركة" في نظام المستخدم */
@media (prefers-reduced-motion: reduce) {

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

/* الأرقام والمسارات تُقرأ من اليسار حتى داخل صفحة عربية */
.ltr,
.ltr-field {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
}

/* =====================================================================
   تفعيل خط Neo Sans Arabic
   ---------------------------------------------------------------------
   الخط غير محمّل حالياً في أي صفحة: كل حزم الخطوط تذكره بالاسم فقط،
   فيسقط المتصفح إلى خط النظام. صفحتا "من نحن" و"الخصوصية" وحدهما
   تحمّلان Tajawal من Google، ولهذا تبدوان مختلفتين عن بقية المنتج.

   للتفعيل: ارفع ملفّي woff2 إلى public/shared/fonts/ وأزل التعليق.
   الخط مملوك لشركة Monotype — تأكّد من الترخيص قبل استضافته.

@font-face {
    font-family: "Neo Sans Arabic";
    src: url("fonts/NeoSansArabic.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Neo Sans Arabic";
    src: url("fonts/NeoSansArabic-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Neo Sans Arabic";
    src: url("fonts/NeoSansArabic-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
   ===================================================================== */