/* ===========================================================================
   tokens.css — المصدر الوحيد لمتغيّرات التصميم (design plan §2–§4).
   يُحمَّل أولًا قبل أي CSS آخر. لا ألوان خام في باقي الملفات — استخدم المتغيّرات.
   =========================================================================== */

:root {
  /* ===== Brand / Primary (teal-navy) ===== */
  --color-primary:          #0F4C5C;
  --color-primary-hover:    #0C3E4B;
  --color-primary-active:   #082A33;
  --color-primary-soft:     #E2EEF1;
  --color-on-primary:       #FFFFFF;

  /* ===== Secondary / Accent (muted brass) ===== */
  --color-accent:           #B07D2B;
  --color-accent-hover:     #946818;
  --color-accent-soft:      #F6EEDD;

  /* ===== Semantic / Status ===== */
  --color-success:          #1E7A46;
  --color-success-soft:     #E3F2E9;
  --color-warning:          #9A6700;
  --color-warning-soft:     #FBF1D9;
  --color-danger:           #B3261E;
  --color-danger-hover:     #8F1D17;
  --color-danger-soft:      #FBE6E4;
  --color-info:             #155E94;
  --color-info-soft:        #E4EEF6;

  /* ===== Neutrals ===== */
  --color-bg:               #F4F6F8;
  --color-surface:          #FFFFFF;
  --color-surface-alt:      #F8FAFB;
  --color-surface-muted:    #EDF1F4;   /* fallback مستخدَم في components.css (الحقول للقراءة فقط) */
  --color-border:           #D5DBE1;
  --color-border-strong:    #B4BCC5;
  --color-text:             #1B2733;
  --color-text-muted:       #5A6B7B;
  --color-text-disabled:    #97A3AE;
  --color-focus-ring:       #2D7D93;
  --color-overlay:          rgba(15, 28, 38, 0.45);

  /* ===== Typography ===== */
  --font-sans: "Cairo", "Segoe UI", "Tahoma", system-ui, sans-serif;
  --font-numeric: "Cairo", "Segoe UI", system-ui, sans-serif;

  --text-h1: 1.75rem;      --lh-h1: 1.4;
  --text-h2: 1.375rem;     --lh-h2: 1.45;
  --text-h3: 1.125rem;     --lh-h3: 1.5;
  --text-h4: 1rem;         --lh-h4: 1.5;
  --text-body: 1rem;       --lh-body: 1.7;
  --text-small: 0.875rem;  --lh-small: 1.6;
  --text-table: 0.9375rem; --lh-table: 1.5;
  --text-caption: 0.75rem; --lh-caption: 1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ===== Spacing (4 / 8 base) ===== */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  /* ===== Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ===== Elevation ===== */
  --shadow-sm: 0 1px 2px rgba(15,28,38,0.06),0 1px 1px rgba(15,28,38,0.04);
  --shadow-md: 0 4px 12px rgba(15,28,38,0.10);
  --shadow-lg: 0 12px 32px rgba(15,28,38,0.18);

  /* ===== Layout ===== */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 60px;
  --content-max: 1440px;
  --content-pad: var(--space-6);
  --z-topbar: 100;
  --z-sidebar: 90;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 1100;
}