/* ============================================================
 * 💈 SHAHED — رموز التصميم الموحّدة (tokens.css) — UI-ITEM-1.1
 * ============================================================
 * المصدر الوحيد لكل متغيّرات التصميم. مستخرج من admin (الأنضج)
 * وموحّد. يُستورد في رأس كل صفحة قبل ستايلها الخاص:
 *   <link rel="stylesheet" href="tokens.css">
 *
 * الوضع الافتراضي فاتح؛ [data-theme="dark"] يفعّل الداكن.
 * تغيير أي قيمة هنا ينعكس على كل صفحة تستورد الملف.
 * ============================================================ */

:root {
  /* ── مقياس الألوان (Cold Metal) ── */
  --c-50:  #F4F6F6;
  --c-100: #E9ECEC;
  --c-200: #C9D2D4;
  --c-400: #8C9A9E;
  --c-700: #44545B;
  --c-900: #11171B;

  /* ── الدلالات الأساسية ── */
  --primary: var(--c-900);
  --primary-dark: var(--c-900);
  --primary-light: var(--c-700);
  --primary-soft: var(--c-200);
  --accent: var(--c-700);
  --accent-light: var(--c-400);
  --accent-strong: var(--c-900);

  /* ── ألوان الحالة (وظيفية — محفوظة للأمان البصري) ── */
  --success: #3D7A65;          /* أخضر (أغمق قليلاً للتباين على فاتح) */
  --warn: #9A7825;             /* ذهبي */
  --danger: #C04848;           /* أحمر — حرج لأزرار الحذف */
  --info: var(--c-700);

  /* ── الخلفيات (دلالات موحّدة) ── */
  --bg-page: var(--c-50);     /* خلفية الصفحة */
  --bg-card: #FFFFFF;          /* سطح مرتفع (بطاقة/نافذة) */
  --bg-soft: var(--c-100);
  --bg-soft-2: var(--c-200);
  --bg-input: #FFFFFF;         /* حقل إدخال */
  --bg-overlay: rgba(17, 23, 27, 0.55);

  /* ── النصوص ── */
  --text-dark: var(--c-900);
  --text-mid: var(--c-700);
  --text-muted: #5E6B70;       /* مرفوع التباين عن c-400 (≥4.5:1 على فاتح) — يكمّل FE-ITEM-1.5 */
  --text-on-primary: #FFFFFF;

  /* ── الحدود ── */
  --border: var(--c-200);
  --border-strong: var(--c-400);

  /* ── الظلال ── */
  --shadow-sm: 0 1px 2px rgba(17, 23, 27, 0.04);
  --shadow-md: 0 2px 6px rgba(17, 23, 27, 0.06);
  --shadow-lg: 0 8px 24px rgba(17, 23, 27, 0.10);

  /* ── خلفيات الحالة ── */
  --bg-success: var(--c-100);
  --bg-warn: var(--c-100);
  --bg-danger: var(--c-100);
  --bg-info: var(--c-100);

  /* ── أسماء توافقية (aliases) — تدعم صفحات تستخدم تسمية مختلفة ── */
  --text: var(--text-dark);          /* بعض الصفحات تستخدم --text بدل --text-dark */
  --text-dim: var(--text-muted);     /* مرادف لـ --text-muted */
  --border-soft: var(--c-100);       /* حد أخف */
  --warning: var(--warn);            /* مرادف لـ --warn */

  /* ── نصف القطر ── */
  --radius: 4px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;

  /* ── المسافات (قاعدة 4px — متّسقة) ── */
  --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;

  /* ── الانتقالات ── */
  --transition-base: 160ms ease-out;

  /* ── نقاط التوقف (مرجعية — تُستخدم في @media يدوياً) ── */
  /* --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; */
}

/* ════════════════════════════════════════════════════════
 * الوضع الداكن — عكس المقياس: 900 خلفية، 100 نص
 * ════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --primary: var(--c-100);
  --primary-dark: var(--c-200);
  --primary-light: var(--c-400);
  --primary-soft: var(--c-700);
  --accent: var(--c-200);
  --accent-light: var(--c-400);
  --accent-strong: var(--c-100);

  --success: #4A9078;          /* أخضر (يطابق الصفحات الداكنة) */
  --warn: #B89030;             /* ذهبي */
  --danger: #C04848;           /* أحمر — حرج لأزرار الحذف */
  --info: var(--c-200);

  --bg-page: var(--c-900);
  --bg-card: #1A2126;
  --bg-soft: #1F262C;
  --bg-soft-2: var(--c-700);
  --bg-input: #1A2126;
  --bg-overlay: rgba(0, 0, 0, 0.75);

  --text-dark: var(--c-100);
  --text-mid: var(--c-200);
  --text-muted: #A3B0B5;       /* مرفوع التباين على داكن (≥4.5:1) */
  --text-on-primary: var(--c-900);

  --border: #2A3338;
  --border-strong: var(--c-700);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  --bg-success: #1F262C;
  --bg-warn: #1F262C;
  --bg-danger: #1F262C;
  --bg-info: #1F262C;

  /* أسماء توافقية في الوضع الداكن */
  --text: var(--text-dark);
  --text-dim: var(--text-muted);
  --border-soft: var(--c-700);
  --warning: var(--warn);
}