/* REDESIGN-2026 · رموز التصميم المعتمدة (design/redesign-2026/tokens.css) — منقولة كما هي.

   المكوّنات الجديدة في `src/ui/` بتقرأ `--ty-*` بس. الشاشات القديمة لسه على رموز
   `styles.css` (‏`--brand` · `--surface` · `--ink`…)، وقيمها هناك اتظبطت على نفس
   الألوان، فالشكلين واحد لحد ما كل شاشة تتنقل.

   الملف ده بيتحمّل قبل `styles.css` وبعد `assets/fonts/fonts.css`. */

:root {
  /* الألوان — من لوحة «الأساس» */
  --ty-green: #176b52; /* الأساسي: زر واحد في كل شاشة، الروابط، العنصر النشط */
  --ty-green-deep: #0f4d3b;
  --ty-green-soft: #e8f1ec;
  --ty-charcoal: #16231f; /* النص الأساسي، البطاقات الداكنة، الشريط العلوي للمنصة */
  --ty-sand: #d9b36c; /* زخرفي فقط — ممنوع للنص أو الحالات */
  --ty-ivory: #f7f4ec; /* خلفية الموقع التسويقي ولوحات المراجعة */
  --ty-on-charcoal: #f7f4ec; /* النص فوق الفحمي (--ty-charcoal): فاتح في الوضعين — --ty-ivory بيقلب غامق في الداكن */
  --ty-bg: #fbfaf6; /* خلفية التطبيق */
  --ty-surface: #ffffff;
  --ty-surface-2: #f7f8f4;
  --ty-line: #dce3df;
  --ty-line-soft: #eef1ef;
  --ty-line-strong: #cbd5d0; /* حدّ الزر الثانوي (لوحة الأساس) */
  --ty-text: #16231f;
  --ty-text-2: #4a5551;
  --ty-text-3: #5f6a66;
  --ty-text-4: #7b8581;
  --ty-danger: #b13a2c;
  --ty-on-green: #ffffff; /* النص فوق الزر الأساسي */
  --ty-on-danger: #ffffff;
  --ty-disabled-bg: #dce3df;
  --ty-disabled-fg: #6b7571;
  /* شارات الحالة: خلفية / نص */
  --ty-ok-bg: #e8f1ec;
  --ty-ok-fg: #0f4d3b;
  --ty-warn-bg: #fff4da;
  --ty-warn-fg: #7a4b03;
  --ty-bad-bg: #fff0ed;
  --ty-bad-fg: #9a2f23;
  --ty-info-bg: #e6f0fa;
  --ty-info-fg: #1f4f86;
  --ty-mute-bg: #eef1ec;
  --ty-mute-fg: #47524e;
  /* الخط */
  --ty-font-head: "Alexandria", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --ty-font-body: "IBM Plex Sans Arabic", "Alexandria", Tahoma, sans-serif;
  /* UI-CLARITY-1101 (أنس 2026-11-01: «الخطوط مش باينة»): سلّم خطوط واحد بدل أرقام مكتوبة باليد.
     الحد الأدنى لأي نص 14px — الأصغر من كده مابيتقراش على تليفون في الشمس. */
  --ty-fs-xs: 14px; /* سطر صغير تحت عنوان، شارة، تلميح */
  --ty-fs-s: 15px; /* نص ثانوي */
  --ty-fs-m: 16px; /* نص المتن والأزرار والقائمة */
  --ty-fs-l: 18px; /* نص بارز، رأس قسم في القائمة */
  --ty-fs-h3: 20px; /* عنوان بطاقة */
  --ty-fs-h2: 24px; /* عنوان شاشة على الموبايل */
  --ty-fs-h1: 30px; /* عنوان شاشة على الويب */
  /* المسافات والزوايا */
  --ty-space: 8px;
  --ty-radius-s: 12px;
  --ty-radius-m: 16px;
  --ty-radius-l: 20px;
  /* أهداف اللمس */
  --ty-touch: 48px; /* الحد الأدنى في الويب والموبايل */
  --ty-touch-field: 56px; /* شاشات المشرف في الموقع: 56–64 */
  /* ارتفاع الشريط السفلي: صفر على الويب، وقيمته الفعلية على الموبايل من shell.css.
     أي زر ثابت تحت يقف فوقه: `bottom: var(--ty-tabbar-h)`. */
  --ty-tabbar-h: 0px;
  --ty-shadow: 0 12px 32px rgba(22, 35, 31, 0.08);
  --ty-shadow-dialog: 0 24px 64px rgba(22, 35, 31, 0.18);
  --ty-scrim: rgba(9, 14, 12, 0.55);
}

/* الوضع الداكن: نفس الأسماء بقيم داكنة (SPEC §2). بيتفعّل باختيار المستخدم بس —
   نفس قاعدة `styles.css` (‏D6): الفاتح هو الافتراضي ومابنتبعش تفضيل النظام.
   التباين محسوب: كل زوج نص/خلفية هنا ≥ 4.5:1. */
:root[data-theme="dark"] {
  --ty-green: #5cc494;
  --ty-green-deep: #8fdcb8;
  --ty-green-soft: #1e3830;
  --ty-charcoal: #0e1412;
  --ty-ivory: #1b2522;
  --ty-on-charcoal: #f2efe6;
  --ty-bg: #121917;
  --ty-surface: #1b2522;
  --ty-surface-2: #212c28;
  --ty-line: #33403c;
  --ty-line-soft: #2a3531;
  --ty-line-strong: #46544f;
  --ty-text: #f2f4f1;
  --ty-text-2: #c3ccc8;
  --ty-text-3: #aab4b0;
  --ty-text-4: #929c98;
  --ty-danger: #f08c7d;
  --ty-on-green: #0e1412;
  --ty-on-danger: #0e1412;
  --ty-disabled-bg: #2a3531;
  --ty-disabled-fg: #929c98;
  --ty-ok-bg: #1e3830;
  --ty-ok-fg: #a5e3c5;
  --ty-warn-bg: #33290f;
  --ty-warn-fg: #f0c98a;
  --ty-bad-bg: #331915;
  --ty-bad-fg: #f5a99c;
  --ty-info-bg: #162a40;
  --ty-info-fg: #a5c8f0;
  --ty-mute-bg: #2a3531;
  --ty-mute-fg: #c3ccc8;
  --ty-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --ty-shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6);
  --ty-scrim: rgba(0, 0, 0, 0.68);
}

/* الورق فاتح دايمًا — نفس قاعدة الطباعة في `styles.css`. */
@media print {
  :root[data-theme="dark"] {
    --ty-bg: #ffffff;
    --ty-surface: #ffffff;
    --ty-surface-2: #f7f8f4;
    --ty-text: #16231f;
    --ty-text-2: #4a5551;
    --ty-text-3: #5f6a66;
    --ty-line: #dce3df;
  }
}

/* أرقام متساوية العرض في كل مكان: الأرقام بتترصّ تحت بعض في الجداول والبطاقات. */
* {
  font-variant-numeric: tabular-nums;
}