/* =====================================================================
   Details Decor — Shared Design Tokens
   المصدر الوحيد للألوان والخطوط والمسافات لكل النظام
   (الموقع + داشبورد الأدمن + داشبورد اليوزر + صفحات الدخول)

   استورد الملف ده في أول أي layout قبل أي CSS تاني خاص بالصفحة:
   <link rel="stylesheet" href="{{ asset('assets/shared/variables.css') }}">
   ===================================================================== */

:root {
    /* === الألوان الأساسية (من frontend.css - المصدر المعتمد) === */
    --black: #0A0A0A;
    --black-soft: #141414;
    --black-light: #1E1E1E;
    --black-warm: #11100E;

    --beige: #F7F3EE;
    --beige-light: #FCFAF7;
    --beige-dark: #EDE8E0;
    --beige-warm: #F9F5EF;

    --gold: #B8956A;
    --gold-light: #CEB393;
    --gold-dark: #8B7355;
    --gold-soft: rgba(184, 149, 106, 0.12);
    --gold-border: rgba(184, 149, 106, 0.25);

    /* === النصوص === */
    --text-primary: #1A1A1A;
    --text-secondary: #6B6560;
    --text-muted: #A09A95;
    --text-light: #C5BFBA;
    --text-inverse: #F7F3EE;
    --text-inverse-muted: rgba(247, 243, 238, 0.5);

    /* === الخلفيات === */
    --bg-beige: #F7F3EE;
    --bg-beige-light: #FCFAF7;
    --bg-beige-dark: #EDE8E0;
    --bg-black: #0A0A0A;
    --bg-black-soft: #141414;
    --bg-card: #FCFAF7;
    --bg-overlay: rgba(10, 10, 10, 0.5);
    --bg-overlay-dark: rgba(10, 10, 10, 0.85);

    /* === الحدود والظلال === */
    --border-light: rgba(10, 10, 10, 0.06);
    --border-medium: rgba(10, 10, 10, 0.10);
    --border-dark: rgba(255, 255, 255, 0.06);
    --border-gold: rgba(184, 149, 106, 0.25);

    --shadow-xs: 0 2px 12px rgba(10, 10, 10, 0.04);
    --shadow-sm: 0 4px 24px rgba(10, 10, 10, 0.06);
    --shadow-md: 0 12px 48px rgba(10, 10, 10, 0.08);
    --shadow-lg: 0 24px 72px rgba(10, 10, 10, 0.12);
    --shadow-gold: 0 8px 32px rgba(184, 149, 106, 0.15);

    /* === الزوايا === */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* === المسافات === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 80px;
    --space-5xl: 100px;
    --space-6xl: 130px;

    /* === الخطوط === */
    --font-primary: 'Cairo', 'Tajawal', -apple-system, serif;
    --font-secondary: 'Tajawal', 'Cairo', -apple-system, serif;

    /* === الانتقالات === */
    --transition-smooth: 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    --transition-extra-smooth: 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);

    /* =====================================================================
       ألوان الحالة (Status Colors) — جديدة
       دي كانت أكبر مصدر تشتت: كل صفحة كانت بتخترع أخضر/أحمر/أصفر
       خاص بيها لعرض حالة "مكتمل / ملغي / معلق". دلوقتي كلهم بيرجعوا
       لنفس المصدر ده.
       ===================================================================== */
    --success: #1F8F4D;
    --success-dark: #176B3A;
    --success-soft: #E8F6ED;
    --success-border: rgba(31, 143, 77, 0.25);

    --danger: #A52D2D;
    --danger-dark: #8D2C2C;
    --danger-soft: #FDECEC;
    --danger-border: rgba(165, 45, 45, 0.25);

    --warning: #B8956A;
    --warning-dark: #8B7355;
    --warning-soft: #FFF6DF;
    --warning-border: rgba(184, 149, 106, 0.25);

    --info: #195C8B;
    --info-dark: #14496D;
    --info-soft: #E8F4FC;
    --info-border: rgba(25, 92, 139, 0.25);

    --neutral: #777777;
    --neutral-soft: #F7F7F7;
    --neutral-border: #E5E5E5;

    /* === خاصة بالداشبورد (أدمن) — أبعاد لواجهة لوحة التحكم فقط === */
    --admin-sidebar-width: 270px;
    --admin-radius: 12px;
    --admin-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}