/* ============================================================
   LaundryFlow — Design Tokens (theme.css)
   هوية "Clean / Premium / Modern" لخدمة استلام وتسليم الملابس
   ============================================================ */

:root {
  /* ---------- الألوان الأساسية ---------- */
  --primary: #0D9488;            /* Teal — نظافة وثقة */
  --primary-dark: #0F766E;
  --primary-darker: #115E59;
  --primary-soft: #CCFBF1;
  --primary-50: #F0FDFA;

  --accent: #0EA5E9;             /* Sky — روابط ومعلومات */
  --accent-dark: #0284C7;
  --accent-soft: #E0F2FE;

  /* ---------- ألوان الحالات والتنبيهات ---------- */
  --success: #16A34A;
  --success-soft: #DCFCE7;
  --warning: #D97706;
  --warning-soft: #FEF3C7;
  --danger: #DC2626;
  --danger-soft: #FEE2E2;
  --info: #2563EB;
  --info-soft: #DBEAFE;

  /* ---------- ألوان حالات الطلب ---------- */
  --st-pending: #D97706;    /* بانتظار — كهرمان */
  --st-picked: #EA580C;     /* استلام — برتقالي */
  --st-collected: #0891B2;  /* تم الاستلام — سماوي */
  --st-washing: #7C3AED;    /* غسيل — بنفسجي */
  --st-preparing: #4F46E5;  /* تجهيز — نيلي */
  --st-ready: #0D9488;      /* جاهز — تيل */
  --st-delivered: #2563EB;  /* تم التسليم — أزرق */

  /* ---------- الحيادية ---------- */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --text: #0F172A;
  --text-muted: #64748B;
  --text-faint: #94A3B8;

  /* ---------- الخط ---------- */
  --font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- الحواف ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- الظلال ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.14);
  --shadow-focus: 0 0 0 4px rgba(13, 148, 136, 0.15);

  /* ---------- المسافات ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;

  /* ---------- مقاسات ---------- */
  --touch-target: 48px;   /* الحد الأدنى لأهداف اللمس */
  --container: 1120px;
  --container-narrow: 640px;

  /* ---------- الحركة ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.2s;
}

/* نقاط التوقف المرجعية (للاستخدام في الوسائط):
   small phone  < 360px
   medium phone ≥ 360px
   large phone  ≥ 480px
   tablet       ≥ 768px
   laptop       ≥ 1024px
   desktop      ≥ 1280px
*/