/* =============================================================================
   variables.css — نظام الرموز التصميمية (Design Tokens)
   الوضع الفاتح افتراضي على :root ، و الوضع الداكن على [data-theme="dark"]
   ============================================================================= */

:root {
  /* ---- الألوان الأساسية (وضع فاتح) ---- */
  --bg:            #EEF1F6;   /* خلفية الصفحة   */
  --surface:       #FFFFFF;   /* البطاقات       */
  --surface-2:     #F6F8FB;   /* سطح ثانوي      */
  --surface-3:     #EAEEF4;   /* سطح غائر       */
  --border:        #DDE3EC;
  --border-strong: #C7D0DC;

  --text:          #0F1B2D;   /* نص أساسي داكن  */
  --text-2:        #46546A;   /* نص ثانوي       */
  --text-muted:    #7A879B;   /* نص خافت        */
  --text-invert:   #FFFFFF;

  /* ---- الهوية / اللون المميّز (كهرماني عالي الوضوح) ---- */
  --brand:         #F59E0B;
  --brand-600:     #E08C00;
  --brand-700:     #B87200;
  --brand-soft:    #FEF3E2;
  --on-brand:      #241A05;

  /* ---- ألوان الحالات ---- */
  --st-idle:       #64748B;
  --st-loading:    #F59E0B;
  --st-enroute:    #3B82F6;
  --st-arrived:    #22C55E;
  --st-returning:  #8B5CF6;

  /* ---- شِدّة الصيانة ---- */
  --ok:            #16A34A;
  --ok-soft:       #E7F6EC;
  --warn:          #D97706;
  --warn-soft:     #FDF0DC;
  --danger:        #DC2626;
  --danger-soft:   #FBE7E7;
  --info:          #2563EB;
  --info-soft:     #E7EEFD;

  /* ---- ظِلال ---- */
  --shadow-sm:  0 1px 2px rgba(16, 27, 45, .06), 0 1px 3px rgba(16, 27, 45, .05);
  --shadow-md:  0 4px 12px rgba(16, 27, 45, .08), 0 2px 4px rgba(16, 27, 45, .05);
  --shadow-lg:  0 16px 40px rgba(16, 27, 45, .14), 0 4px 12px rgba(16, 27, 45, .08);
  --shadow-brand: 0 6px 18px rgba(245, 158, 11, .35);

  /* ---- أنصاف أقطار ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- مسافات ---- */
  --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;

  /* ---- حركة ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .15s;
  --dur: .25s;
  --dur-slow: .4s;

  /* ---- خطوط ---- */
  --font-display: "Cairo", system-ui, sans-serif;
  --font-body: "Tajawal", system-ui, sans-serif;

  color-scheme: light;
}

/* ============================ الوضع الداكن ============================ */
[data-theme="dark"] {
  --bg:            #0A101C;
  --surface:       #131C2C;
  --surface-2:     #1A2334;
  --surface-3:     #222D42;
  --border:        #26324A;
  --border-strong: #354465;

  --text:          #F2F6FC;   /* نص أبيض/فاتح صريح */
  --text-2:        #B7C2D6;
  --text-muted:    #8797B0;
  --text-invert:   #0A101C;

  --brand:         #FBB040;
  --brand-600:     #F59E0B;
  --brand-700:     #E08C00;
  --brand-soft:    #2A2210;
  --on-brand:      #1A1204;

  --st-idle:       #94A3B8;
  --st-loading:    #FBBF24;
  --st-enroute:    #60A5FA;
  --st-arrived:    #4ADE80;
  --st-returning:  #A78BFA;

  --ok:            #4ADE80;
  --ok-soft:       #10261A;
  --warn:          #FBBF24;
  --warn-soft:     #2A2110;
  --danger:        #F87171;
  --danger-soft:   #2D1414;
  --info:          #60A5FA;
  --info-soft:     #121F38;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, .4);
  --shadow-lg:  0 20px 48px rgba(0, 0, 0, .55);
  --shadow-brand: 0 6px 20px rgba(251, 176, 64, .28);

  color-scheme: dark;
}

/* منع الوميض عند بدء التحميل قبل تفعيل السكربت */
html { background: var(--bg); }