/* =============================================================================
   إيثار — variables.css
   All design tokens for the kit. Editing this file re-themes everything.
   Quick recipes:
     - Re-brand: change --brand-primary and --brand-accent below.
     - Resize sidebar: change --app-sidebar-width.
     - Change density: tweak --space-* scale and --app-header-height.
============================================================================= */

/* -----------------------------------------------------------------------------
   1. Raw palette — هوية إيثار: أخضر زيتوني (أساسي) + رملي (لمسة قليلة) + رمادي هادئ
   ألوان مسطّحة بلا تدرجات ولا توهج.
----------------------------------------------------------------------------- */
:root {
  /* Olive / أخضر زيتوني */
  --olive-900: #12352a;
  --olive-800: #184a3b;
  --olive-700: #1f5f4a;
  --olive-600: #2a6f58;
  --olive-500: #3f8469;
  --olive-300: #9cc3b1;
  --olive-100: #e1eee7;
  --olive-50:  #f1f7f3;

  /* Sand / رملي */
  --sand-700: #8a6a2f;
  --sand-600: #b38b45;
  --sand-500: #d9b26f;
  --sand-300: #ebd3a4;
  --sand-100: #f7eedd;

  /* Neutral greys */
  --gray-50:  #f7f8f8;
  --gray-100: #f0f2f2;
  --gray-200: #e2e6e6;
  --gray-300: #cdd3d3;
  --gray-400: #9aa5a4;
  --gray-500: #6b7776;
  --gray-600: #4f5a59;
  --gray-700: #38423f;
  --gray-800: #242c2b;
  --gray-900: #151b1a;

  /* Status colors */
  --status-success: #2f855a;
  --status-success-soft: #e3f3ea;
  --status-danger:  #c53030;
  --status-danger-soft: #fbe7e7;
  --status-warning: #b7791f;
  --status-warning-soft: #fcf1dc;
  --status-info:    #2b6cb0;
  --status-info-soft: #e4eef9;
}

/* -----------------------------------------------------------------------------
   2. Brand pointers — change these lines to re-skin the whole kit
----------------------------------------------------------------------------- */
:root {
  --brand-primary:        var(--olive-700);
  --brand-primary-hover:  var(--olive-800);
  --brand-primary-strong: var(--olive-800);
  --brand-primary-soft:   var(--olive-50);

  --brand-accent:         var(--sand-500);
  --brand-accent-hover:   var(--sand-600);
  --brand-accent-soft:    var(--sand-100);
}

/* -----------------------------------------------------------------------------
   3. Semantic tokens — LIGHT MODE (default)
----------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --color-bg:           var(--gray-50);
  --color-surface:      #ffffff;
  --color-surface-2:    var(--gray-100);
  --color-surface-hover:var(--gray-100);
  --color-border:       var(--gray-200);
  --color-border-strong:var(--gray-300);

  /* Text */
  --color-text:         var(--gray-800);
  --color-text-muted:   var(--gray-500);
  --color-text-faint:   var(--gray-400);
  --color-text-inverse: #ffffff;

  /* Links */
  --color-link:         var(--olive-700);
  --color-link-hover:   var(--olive-800);

  /* Sidebar — زيتوني داكن مصمت */
  --sidebar-bg:               var(--olive-900);
  --sidebar-bg-elevated:      var(--olive-800);
  --sidebar-text:             #d5e5dc;
  --sidebar-text-muted:       #93b2a3;
  --sidebar-text-active:      #ffffff;
  --sidebar-item-hover:       rgba(255, 255, 255, 0.06);
  --sidebar-item-active:      rgba(255, 255, 255, 0.10);
  --sidebar-strip:            var(--sand-300);
  --sidebar-border:           rgba(255, 255, 255, 0.08);
  --sidebar-brand-bg:         var(--olive-900);
  --sidebar-org-bg:           rgba(255, 255, 255, 0.06);
  --sidebar-org-border:       rgba(255, 255, 255, 0.10);

  /* Header */
  --header-bg:          var(--color-surface);
  --header-border:      var(--color-border);
  --header-text:        var(--color-text);

  /* Shadows — مسطّح: البطاقات بحدود فقط، والظل للقوائم المنبثقة والنوافذ */
  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  0 2px 8px rgba(21, 27, 26, 0.08);
  --shadow-lg:  0 8px 20px rgba(21, 27, 26, 0.10);
  --shadow-xl:  0 16px 32px rgba(21, 27, 26, 0.14);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(31, 95, 74, 0.25);

  /* Overlay (sidebar / modal backdrop) */
  --overlay-bg: rgba(21, 27, 26, 0.5);
  --color-scheme: light;
}

/* -----------------------------------------------------------------------------
   4. Semantic tokens — DARK MODE
----------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg:           #0f1413;
  --color-surface:      #161d1c;
  --color-surface-2:    #1c2423;
  --color-surface-hover:#212a29;
  --color-border:       #28322f;
  --color-border-strong:#36423f;

  --color-text:         #e3e8e7;
  --color-text-muted:   #9aa5a4;
  --color-text-faint:   #6b7776;
  --color-text-inverse: var(--gray-900);

  --color-link:         var(--olive-300);
  --color-link-hover:   #bcd8ca;

  --sidebar-bg:               #0d1814;
  --sidebar-bg-elevated:      #14241e;
  --sidebar-brand-bg:         #0d1814;
  --sidebar-item-hover:       rgba(255, 255, 255, 0.045);
  --sidebar-item-active:      rgba(255, 255, 255, 0.08);

  --brand-primary:        var(--olive-500);
  --brand-primary-hover:  var(--olive-600);
  --brand-primary-strong: var(--olive-300);
  --brand-primary-soft:   rgba(63, 132, 105, 0.18);

  --brand-accent:         var(--sand-300);
  --brand-accent-hover:   var(--sand-500);
  --brand-accent-soft:    rgba(217, 178, 111, 0.16);

  --header-bg:          var(--color-surface);
  --header-border:      var(--color-border);

  --status-success-soft: rgba(47, 133, 90, 0.20);
  --status-danger-soft:  rgba(197, 48, 48, 0.20);
  --status-warning-soft: rgba(183, 121, 31, 0.22);
  --status-info-soft:    rgba(43, 108, 176, 0.22);

  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 16px 32px rgba(0, 0, 0, 0.55);

  --overlay-bg: rgba(0, 0, 0, 0.65);
  --color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   5. Sizing / layout
----------------------------------------------------------------------------- */
:root {
  --app-sidebar-width:        260px;
  --app-sidebar-width-mobile: 280px;
  --app-header-height:        64px;
  --app-mobile-breakpoint:    992px;

  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* Radii */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Type — خط ثمانية */
  --font-sans: 'Thmanyah Sans', 'Tajawal', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Thmanyah Serif Display', 'Thmanyah Sans', 'Tajawal', system-ui, serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* مقاسات الخط: النظام يستخدمه موظفون كبار السن، فالأساس 15px لا 14px
     والثانوي 14px — أوضح للقراءة بلا تكبير الواجهة كلها. */
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   21px;
  --fs-2xl:  25px;
  --fs-3xl:  31px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-heavy:   800;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.75;

  /* Motion */
  --duration-fast:  120ms;
  /* مقاسات اللمس والصفوف — يبدّلها مفتاح حجم العرض في a11y.css.
     مكانها هنا لأن الصفحات المستقلة (الدخول · معالج الإعداد · صفحات الأخطاء)
     لا تُحمّل a11y.css، ورمزٌ بلا قيمة يجعل `var()` باطلًا فينهار ما يعتمد عليه. */
  --app-row-pad-y: 10px;
  --app-control-h: 40px;
  --app-icon-btn:  36px;

  --duration:       200ms;
  --duration-slow:  320ms;
  --easing:         cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --z-base:     1;
  --z-sticky:   50;
  --z-header:   100;
  --z-sidebar:  200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;
}