/* =====================================================================
   Design Tokens — المصدر الوحيد للألوان والمسافات والأحجام.
   لا تُكتب ألوان أو مسافات مباشرة في أي ملف آخر؛ استخدم هذه المتغيرات.
   ألوان الهوية (primary / secondary / accent / background) تُستبدل
   تلقائياً من إعدادات الموقع في لوحة الإدارة (انظر _BrandingHead.cshtml).
   ===================================================================== */

@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("../lib/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url("../lib/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("../lib/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 400; font-display: swap; src: url("../lib/fonts/noto-sans-arabic-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 500; font-display: swap; src: url("../lib/fonts/noto-sans-arabic-arabic-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 600; font-display: swap; src: url("../lib/fonts/noto-sans-arabic-arabic-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 700; font-display: swap; src: url("../lib/fonts/noto-sans-arabic-arabic-700-normal.woff2") format("woff2"); }

:root {
  /* ---- ألوان الهوية (قيم افتراضية، تتغير من الإدارة) ---- */
  --color-primary: #1F4E9C;          /* Deep Ocean / Royal Blue */
  --color-primary-hover: #1A4386;
  --color-primary-pressed: #163870;
  --color-primary-light: #E8EEF7;
  --color-primary-soft: #D2DCEB;
  --color-on-primary: #FFFFFF;
  --color-secondary: #1AA6C4;        /* Aqua / Cyan */
  --color-secondary-light: #E6F5F8;
  --color-accent: #20B2A0;           /* Turquoise */
  --color-accent-light: #E7F6F4;
  --color-background: #F4F7FB;       /* Very light blue-gray */

  /* ---- أسطح ونصوص (جاهزة لوضع داكن لاحقاً) ---- */
  --color-surface: #FFFFFF;
  --color-surface-secondary: #F8FAFD;
  --color-surface-sunken: #EEF2F8;
  --color-text-primary: #0F1B33;     /* Deep Navy */
  --color-text-secondary: #5B6B82;   /* Slate */
  --color-text-muted: #8492A6;
  --color-border: #E3E9F2;
  --color-border-strong: #CFD8E5;
  --color-overlay: rgba(15, 27, 51, 0.45);

  /* ---- ألوان الحالة ---- */
  --color-success: #1F9D63;  --color-success-light: #E6F5EE;
  --color-warning: #C07A12;  --color-warning-light: #FBF1E1;
  --color-danger:  #D14343;  --color-danger-light:  #FBEAEA;
  --color-info:    var(--color-secondary); --color-info-light: var(--color-secondary-light);
  --color-neutral: #64748B;  --color-neutral-light: #EEF1F5;

  /* ---- تدرّج هادئ (للبطاقة المميزة والعنصر المختار فقط) ---- */
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 45%, var(--color-secondary) 140%);

  /* ---- الخطوط ---- */
  --font-sans: "Noto Sans Arabic", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-latin: "Instrument Sans", "Noto Sans Arabic", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-display: 3.5rem;   /* 56 */
  --text-h1: 2.5rem;        /* 40 */
  --text-h2: 2rem;          /* 32 */
  --text-h3: 1.5rem;        /* 24 */
  --text-h4: 1.25rem;       /* 20 */
  --text-body-lg: 1.125rem; /* 18 */
  --text-body: 1rem;        /* 16 */
  --text-sm: 0.875rem;      /* 14 */
  --text-caption: 0.8125rem;/* 13 */
  --text-xs: 0.75rem;       /* 12 */
  /* لوحة التحكم أكثر إحكاماً من الصفحات العامة */
  --text-page-title: 1.5rem;
  --text-kpi: 2rem;
  --line-height-tight: 1.25;
  --line-height-base: 1.6;

  /* ---- المسافات (شبكة 8px) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ---- الزوايا ---- */
  --radius-sm: 8px;
  --radius-control: 10px;   /* الأزرار والحقول */
  --radius-card: 16px;
  --radius-lg: 22px;        /* البطاقات الكبيرة */
  --radius-pill: 999px;

  /* ---- الظلال (خفيفة جداً) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 27, 51, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 27, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 27, 51, 0.06);
  --shadow-lg: 0 16px 40px rgba(15, 27, 51, 0.10);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);

  /* ---- الحدود ---- */
  --border-width: 1px;
  --border: var(--border-width) solid var(--color-border);

  /* ---- الأحجام ---- */
  --control-height: 44px;
  --control-height-sm: 36px;
  --control-height-lg: 48px;
  --icon-xs: 16px; --icon-sm: 18px; --icon-md: 20px;
  --sidebar-width: 272px;
  --topbar-height: 68px;
  --container-max: 1440px;

  /* ---- الحركة: تُختار القيمة حسب ما تفعله الحركة، لا حسب أقرب رقم ----
     fast   150: تغيّر لون أو خلفية عند المرور، إغلاق قائمة
     base   200: تغيّر حالة صغيرة (لون المفتاح)
     slow   250: فتح قائمة، حركة دائرة المفتاح
     slower 300: الدرج الجانبي، ظهور رسالة نتيجة عملية */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;
  --duration-slower: 300ms;
  /* منحنى واحد لكل حركات الواجهة: يبدأ سريعاً ويهدأ عند الوصول */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --scale-press: 0.96;   /* الضغط على زر */
  --scale-pop: 0.97;     /* بداية ظهور قائمة منسدلة */
  --distance-base: 8px;  /* مسافة صعود رسالة أو عنصر يظهر */

  /* ---- نقاط التحول (للتوثيق؛ الـ media queries لا تقبل متغيرات)
     sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536 ---- */

  color-scheme: light;
}

/* جاهز للوضع الداكن: يكفي تفعيل data-theme="dark" على <html> لاحقاً */
[data-theme="dark"] {
  --color-background: #0B1424;
  --color-surface: #111D33;
  --color-surface-secondary: #15233D;
  --color-surface-sunken: #0E182B;
  --color-text-primary: #E8EEF7;
  --color-text-secondary: #A3B1C6;
  --color-text-muted: #7F8DA3;
  --color-border: #22324F;
  --color-border-strong: #2E4166;
  --color-primary-light: color-mix(in srgb, var(--color-primary) 22%, #111D33);
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 35%, #111D33);
  color-scheme: dark;
}

/* من فعّل "تقليل الحركة" في جهازه: لا مسافات ولا تكبير، والمدد صفر */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --scale-press: 1; --scale-pop: 1; --distance-base: 0px; }
}