/* ============================================================
   Agency OS — Design tokens (المرحلة 3)
   - فاتح افتراضياً، وداكن اختياري عبر <html data-theme="dark">
   - الذهبي لون هوية محدود (شعار، عنصر نشط، زر رئيسي)؛ للنجاح/التحذير/الخطر/المعلومة ألوان مستقلة
   - كل أزواج النص/الخلفية أدناه ≥ 4.5:1 (نص عادي) — انظر docs/ui-contrast.md
   ============================================================ */

/* خط Tajawal محلي (ترخيص SIL OFL 1.1) — ملفات woff2 من @fontsource/tajawal داخل assets/fonts، بلا أي مصدر خارجي */
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/tajawal-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/tajawal-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/tajawal-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/tajawal-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/tajawal-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/tajawal-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* — الأسطح — */
  --color-bg:          #f5f6f8;   /* خلفية الصفحة */
  --color-surface:     #ffffff;   /* الشريط العلوي/الجانبي */
  --color-card:        #ffffff;
  --color-card-hover:  #f9fafb;
  --color-sunken:      #eef0f3;   /* حقول/صفوف رأس الجدول */

  /* — الحدود — */
  --color-border:        #e3e6eb;
  --color-border-strong: #c9ced6;
  --color-input-border:  #7d8798;   /* حدّ الحقول: ≥ 3:1 على الأبيض (WCAG 1.4.11) */

  /* — النص (على #fff: 15.8 / 7.9 / 5.0) — */
  --color-text-primary:   #1b2230;
  --color-text-secondary: #424b5c;
  --color-text-muted:     #5d6676;
  --color-text-on-accent: #1b2230;

  /* — الهوية الذهبية — */
  --color-accent:        #d4af37;  /* خلفيات وعلامات فقط */
  --color-accent-hover:  #c29d27;
  --color-accent-strong: #7a5c00;  /* نص ذهبي مقروء على الأبيض (6.3:1) */
  --color-accent-dim:    #e8d28a;
  --color-accent-muted:  #f6edc9;
  --color-accent-ghost:  #fbf5de;

  /* — الحالات (نص على خلفيتها الفاتحة ≥ 4.5:1) — */
  --color-success:    #1a7a48;  --color-success-bg: #e6f5ec;  --color-success-border: #b4e0c6;
  --color-warning:    #8f5a00;  --color-warning-bg: #fff3d6;  --color-warning-border: #f1d58a;
  --color-danger:     #b3261e;  --color-danger-bg:  #fdeceb;  --color-danger-border:  #f2b8b3;
  --color-info:       #1d5fc4;  --color-info-bg:    #e8f0fd;  --color-info-border:    #b5cdf3;
  --color-focus:      #1d5fc4;

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

  /* — الزوايا (مخفّضة) — */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* — الخط — */
  --font: 'Tajawal', 'Segoe UI', 'Noto Sans Arabic', Tahoma, system-ui, -apple-system, sans-serif;
  --fs-xs: 12px;  --fs-sm: 13.5px;  --fs-base: 15px;
  --fs-lg: 17px;  --fs-xl: 21px;    --fs-2xl: 26px;  --fs-3xl: 32px;

  /* — الحركة (تُلغى عند prefers-reduced-motion) — */
  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;

  /* — الظلال: فقط للعناصر العائمة — */
  --shadow-card:  none;
  --shadow-pop:   0 8px 24px rgba(20, 27, 40, 0.14), 0 1px 3px rgba(20, 27, 40, 0.08);
  --shadow-modal: 0 16px 48px rgba(20, 27, 40, 0.22);
  --shadow-glow:  none;
  --overlay:      rgba(20, 27, 40, 0.45);

  /* — الطبقات — */
  --z-topbar: 100; --z-sidebar: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-palette: 600;

  /* — أبعاد الهيكل — */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --bottom-nav-h: 60px;

  /* — توافق مع أسماء قديمة تستعملها الصفحات — */
  --bg-main: var(--color-bg);   --bg-content: var(--color-surface);
  --bg-card: var(--color-card); --bg-card-alt: var(--color-sunken);
  --bg-secondary: var(--color-accent-muted); --card-bg: var(--color-card);
  --secondary: var(--color-accent-muted);
  --accent: var(--color-accent-strong); --accent-dim: var(--color-accent-dim);
  --border: var(--color-border);  --text: var(--color-text-primary);
  --text-muted: var(--color-text-muted);
  --danger: var(--color-danger);  --warning: var(--color-warning);  --info: var(--color-info);
  --success: var(--color-success);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:          #0e1117;
  --color-surface:     #141922;
  --color-card:        #181e29;
  --color-card-hover:  #1d2431;
  --color-sunken:      #11161e;

  --color-border:        #283040;
  --color-border-strong: #394356;
  --color-input-border:  #7f8a9e;

  --color-text-primary:   #e9edf4;
  --color-text-secondary: #bcc5d3;
  --color-text-muted:     #98a3b5;
  --color-text-on-accent: #1b2230;

  --color-accent:        #dcb940;
  --color-accent-hover:  #e8c957;
  --color-accent-strong: #e6c552;  /* نص ذهبي على الداكن (9:1) */
  --color-accent-dim:    #8a7326;
  --color-accent-muted:  #3a3318;
  --color-accent-ghost:  #262316;

  --color-success: #52c786;  --color-success-bg: #12281d;  --color-success-border: #1f5238;
  --color-warning: #f0b84f;  --color-warning-bg: #2d2412;  --color-warning-border: #5e4a1c;
  --color-danger:  #ff8a80;  --color-danger-bg:  #2d1716;  --color-danger-border:  #6a2d29;
  --color-info:    #7eb0ff;  --color-info-bg:    #14233b;  --color-info-border:    #274a7d;
  --color-focus:   #7eb0ff;

  --shadow-pop:   0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
  --overlay:      rgba(0, 0, 0, 0.62);
}

@media (max-width: 768px) {
  :root { --fs-base: 16px; --fs-sm: 14px; }
}