/* ============================================================
   Design Tokens — Single Source of Truth
   مستوحى من Material 3 و Apple HIG
   لا تُكتب قيم ثابتة متكررة في أي مكان آخر — استخدم هذه المتغيرات فقط
   ============================================================ */

:root {
  /* -----------------------------------------------------------
     1) الألوان — Color Tokens (Light Theme)
     ----------------------------------------------------------- */
  /* التدرج الجديد بناءً على اللون الرئيسي: #1a6099 */
  --color-primary-50: #f0f6fa;
  --color-primary-100: #e1edf5;
  --color-primary-200: #b9dbe9;
  --color-primary-300: #7ebada;
  --color-primary-400: #3d93c4;
  --color-primary-500: #207ab3;
  --color-primary-600: #1a6099; /* اللون الأساسي المطلوب */
  --color-primary-700: #174e7d;
  --color-primary-800: #164368;
  --color-primary-900: #173957;

  --color-secondary-50: #f0fdfa;
  --color-secondary-100: #ccfbf1;
  --color-secondary-300: #5eead4;
  --color-secondary-500: #14b8a6;
  --color-secondary-600: #0d9488;
  --color-secondary-700: #0f766e;

  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;

  /* الحالات الوظيفية */
  --color-success-50: #ecfdf5;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;

  --color-warning-50: #fffbeb;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  --color-error-50: #fef2f2;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;

  --color-info-50: #eff6ff;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;

  /* نظام الحياد (Neutral) */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-150: #e9edf3;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;

  /* أدوار دلالية (Semantic Roles) — تُستخدم في كل مكان بدلاً من الألوان الخام */
  --surface-base: var(--color-neutral-50);
  --surface-raised: var(--color-neutral-0);
  --surface-sunken: var(--color-neutral-100);
  --surface-overlay: rgba(15, 23, 42, 0.5);
  --surface-hover: var(--color-neutral-100);
  --surface-pressed: var(--color-neutral-150);

  --border-subtle: var(--color-neutral-200);
  --border-default: var(--color-neutral-300);
  --border-strong: var(--color-neutral-400);

  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-400);
  --text-inverse: var(--color-neutral-0);
  --text-on-primary: #ffffff;
  --text-link: var(--color-primary-600);

  --color-primary: var(--color-primary-600);
  --color-primary-hover: var(--color-primary-700);
  --color-primary-active: var(--color-primary-800);
  --color-primary-soft: var(--color-primary-50);

  --color-secondary: var(--color-secondary-600);
  --color-secondary-soft: var(--color-secondary-50);

  --color-accent: var(--color-accent-500);

  --color-success: var(--color-success-600);
  --color-success-soft: var(--color-success-50);
  --color-warning: var(--color-warning-600);
  --color-warning-soft: var(--color-warning-50);
  --color-error: var(--color-error-600);
  --color-error-soft: var(--color-error-50);
  --color-info: var(--color-info-600);
  --color-info-soft: var(--color-info-50);

  --focus-ring-color: var(--color-primary-400);

  /* -----------------------------------------------------------
     2) التدرج الطباعي — Typography Scale
     ----------------------------------------------------------- */
  --font-family-base: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-family-en: "Inter", "Segoe UI", sans-serif;

  --font-size-display: 2.75rem;   /* 44px */
  --font-size-page-title: 2rem;    /* 32px */
  --font-size-section-title: 1.375rem; /* 22px */
  --font-size-card-title: 1.125rem;    /* 18px */
  --font-size-body: 1rem;              /* 16px */
  --font-size-label: 0.875rem;         /* 14px */
  --font-size-helper: 0.8125rem;       /* 13px */
  --font-size-caption: 0.75rem;        /* 12px */

  --line-height-display: 1.15;
  --line-height-title: 1.25;
  --line-height-body: 1.65;
  --line-height-label: 1.4;
  --line-height-tight: 1.2;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* -----------------------------------------------------------
     3) المسافات — Spacing Scale (4px base)
     ----------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */

  /* -----------------------------------------------------------
     4) الانحناءات — Radius Scale
     ----------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* -----------------------------------------------------------
     5) الظلال — Shadow Scale
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15,23,42,0.05);
  --shadow-lg: 0 16px 32px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15,23,42,0.06);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15,23,42,0.08);
  --shadow-focus: 0 0 0 4px rgba(26, 96, 153, 0.22);

  /* -----------------------------------------------------------
     6) الحركة — Motion Timing Scale
     ----------------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-standard: 200ms;
  --motion-slow: 320ms;
  --motion-modal: 260ms;
  --motion-drawer: 280ms;
  --motion-hover: 150ms;
  --motion-focus: 120ms;
  --motion-loading: 1200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* -----------------------------------------------------------
     7) طبقات العمق — Z-Index Scale
     ----------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 300;
  --z-drawer: 400;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;

  /* -----------------------------------------------------------
     8) نقاط التوقف — Breakpoints (مرجعية للاستخدام في التوثيق فقط)
     ----------------------------------------------------------- */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1440px;

  /* -----------------------------------------------------------
     9) عرض الحاويات — Container Widths
     ----------------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --container-full: 100%;

  /* -----------------------------------------------------------
     10) أحجام المكوّنات — Component Sizing Scale
     ----------------------------------------------------------- */
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
  --control-padding-x-sm: 0.75rem;
  --control-padding-x-md: 1rem;
  --control-padding-x-lg: 1.25rem;

  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;

  --avatar-size-sm: 28px;
  --avatar-size-md: 36px;
  --avatar-size-lg: 48px;

  --sidebar-width: 272px;
  --sidebar-width-collapsed: 84px;
  --header-height: 68px;

  color-scheme: light;

  --pattern-ink: var(--color-primary-600);
  --pattern-opacity: 0.075;
  --pattern-repeat: no-repeat;
  --pattern-size: cover;
  --pattern-divider-opacity: 0.18;
  --pattern-divider-size: cover;
}

/* ============================================================
   الوضع الداكن — Dark Theme (نفس الأدوار الدلالية بقيم مختلفة)
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --pattern-ink: var(--color-primary-300);
  --pattern-opacity: 0.11;
  --pattern-divider-opacity: 0.22;

  --surface-base: var(--color-neutral-950);
  --surface-raised: #111827;
  --surface-sunken: #0b1220;
  --surface-overlay: rgba(2, 6, 23, 0.65);
  --surface-hover: #1a2233;
  --surface-pressed: #202a40;

  --border-subtle: #1f2937;
  --border-default: #2b3648;
  --border-strong: #3b4759;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: var(--color-neutral-900);
  --text-link: var(--color-primary-300);

  --color-primary: var(--color-primary-400);
  --color-primary-hover: var(--color-primary-300);
  --color-primary-active: var(--color-primary-200);
  --color-primary-soft: rgba(26, 96, 153, 0.2);

  --color-secondary-soft: rgba(20, 184, 166, 0.16);
  --color-success-soft: rgba(16, 185, 129, 0.16);
  --color-warning-soft: rgba(245, 158, 11, 0.16);
  --color-error-soft: rgba(239, 68, 68, 0.16);
  --color-info-soft: rgba(59, 130, 246, 0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
}