/* ===========================================================
   ملف: design/tokens.css  (ينسخه الوكيل إلى app/www/css/tokens.css
        وإلى dashboard/css/tokens.css)
   الغرض: كل ألوان وأبعاد وظلال تصميم عون AWN في مكان واحد
   مهم: لا يُكتب أي لون أو ظل مباشرة في ملفات CSS الأخرى، بل يُؤخذ من هنا
   =========================================================== */
:root {
  /* الألوان */
  --navy: #142F73;
  /* كحلي عون (الأساسي) */
  --navy-edge: #0A1B4A;
  /* الحافة السفلية للكحلي */
  --blue: #1E4FB4;
  --blue-edge: #142F73;
  --teal: #17A2A0;
  /* فيروزي */
  --teal-edge: #0A6463;
  --teal-light: #E3F5F3;
  /* خلفية الشارات الفيروزية */
  --teal-text: #0B5E5C;
  /* نص فوق الفيروزي الفاتح */
  --teal-deep: #0B4F66;
  /* بطاقة الأقرب إليك */
  --teal-deep-edge: #073847;
  --wa: #13803F;
  /* أخضر واتساب */
  --wa-edge: #0B5A2B;
  --wa-soft: #EAF5EE;
  /* خلفية زر واتساب الهادئ في البطاقات */
  --wa-soft-line: #B6DFC6;
  --navy-soft-line: #BFD0EE;
  /* حد هادئ للأزرار والمربعات الزرقاء */
  --neutral-soft-line: #D5DDEA;
  --teal-soft-line: #B5E0DC;
  --gold: #F5B83D;
  /* ذهبي (مؤجل، للمميز لاحقاً) */
  --gold-edge: #B9801A;
  --bg: #F4F7FC;
  --card: #FFFFFF;
  --ink: #0E1B3D;
  --muted: #5A6785;
  --line: #EDF1F7;
  --tile-edge: #D6E1F2;
  /* حافة البلاطات البيضاء */
  --chip-border: #D5E0F1;
  --field-bg: #F1F5FB;
  --field-border: #DCE5F2;
  --navy-soft: #E6EDFA;
  /* خلفية أيقونات المعلومات */
  --info-box: #EEF3FC;

  /* الخطوط (محلية) */
  --font-head: "Readex Pro", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* الزوايا */
  --r-card: 24px;
  --r-card-lg: 28px;
  --r-tile: 22px;
  --r-btn: 16px;
  --r-btn-lg: 20px;
  --r-chip: 20px;

  /* الظلال ثلاثية الأبعاد */
  --sh-tile: inset 0 1px 0 #FFFFFF, 0 6px 0 var(--tile-edge), 0 14px 22px rgba(20, 47, 115, 0.10);
  --sh-tile-navy: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 0 var(--navy-edge), 0 14px 22px rgba(20, 47, 115, 0.28);
  --sh-btn-navy: 0 5px 0 var(--navy-edge);
  --sh-btn-wa: 0 6px 0 var(--wa-edge), 0 16px 24px rgba(19, 128, 63, 0.25);
  --sh-btn-wa-sm: 0 4px 0 var(--wa-edge);
  --sh-card: 0 1px 0 #E3EAF5, 0 10px 24px rgba(20, 47, 115, 0.07);
  --sh-nav: 0 12px 30px rgba(20, 47, 115, 0.16);

  /* بلاطات الحرف الأول في بطاقات المكاتب */
  --mono-0: linear-gradient(150deg, #3A63C9 0%, var(--navy) 100%);
  --mono-1: linear-gradient(150deg, #4C7FE0 0%, var(--blue) 100%);
  --mono-2: linear-gradient(150deg, #2FC3BC 0%, #0F8E8C 100%);
  --mono-3: linear-gradient(150deg, #23B5B0 0%, var(--teal-deep) 100%);
  --sh-mono-0: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 5px 0 var(--navy-edge), 0 10px 16px rgba(20, 47, 115, 0.18);
  --sh-mono-1: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 5px 0 var(--blue-edge), 0 10px 16px rgba(20, 47, 115, 0.18);
  --sh-mono-2: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 5px 0 var(--teal-edge), 0 10px 16px rgba(20, 47, 115, 0.18);
  --sh-mono-3: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 5px 0 var(--teal-deep-edge), 0 10px 16px rgba(20, 47, 115, 0.18);

  /* أبعاد عامة */
  --touch: 44px;
  /* أقل حجم للمس */
  --app-max: 480px;
  /* أقصى عرض للتطبيق عند عرضه في المتصفح */
  --white: #FFFFFF;
  --on-navy: #C9D6F2;
  --on-teal: #CDEFEC;
  --glass: rgba(255, 255, 255, 0.12);
  --glass-line: rgba(255, 255, 255, 0.28);
  --glass-line-strong: rgba(255, 255, 255, 0.45);
  --sh-banner-blue: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 0 var(--blue-edge), 0 14px 22px rgba(30, 79, 180, 0.28);
  --sh-search: 0 10px 24px rgba(10, 27, 74, 0.25);
  --sh-nearest: 0 6px 0 var(--teal-deep-edge), 0 18px 30px rgba(11, 79, 102, 0.28);
  --sh-outline: 0 0 0 1.5px var(--blue);
}