/*
 * src/tokens.css — طبقة الرموز التصميمية الموحّدة (المستشار الزراعي)
 * ---------------------------------------------------------------------------
 * كل الواجهات الأربع (مزارع/محترف × عربي/إنجليزي) تجلس على هذه الطبقة: لا
 * لون ولا حجم ولا حركة مكتوب داخل مكوّن. القيم أدناه **محسوبة ومختبَرة**:
 * كل زوج نص/خلفية ≥ 4.5:1، وكل عنصر غير نصي ذي معنى (حدود عناصر التحكم،
 * أشرطة الحالة، الرقاقات) ≥ 3:1 — انظر tests/design-tokens.test.mjs الذي
 * يعيد حساب النسب من هذا الملف نفسه.
 *
 * قواعد ثابتة:
 *  1) اللون لا يعني شيئًا وحده (WCAG 1.4.1 / عمى الألوان ~8%): كل حالة
 *     تُعرض دائمًا كثلاثية (لون + أيقونة + نص) عبر رموز --st-*-icon.
 *  2) ممنوع كلمة «آمن» في أي نص؛ الحالة المعتمدة تُسمى «معتمد/نشط».
 *  3) الوضع الداكن: خلفية #1E1E1E (سواد نقي 0,0,0 ممنوع)، والبطاقات
 *     أدكن قليلًا من الخلفية.
 *  4) خطوط النظام فقط — لا تنزيل خطوط (لا @font-face هنا ولا في index.html).
 *  5) أهداف اللمس ≥ 44×44px، والنص الأساسي ≥16px، ونتائج المزارع 18px.
 *  6) حركات < 200ms، وتُطفأ كليًا مع prefers-reduced-motion: reduce.
 */

:root {
  color-scheme: dark;

  /* ---------- الأسطح ---------- */
  --bg: #1E1E1E;            /* خلفية الوضع الداكن (ليست سوداء) */
  --card: #242424;          /* أدكن قليلًا من الخلفية كما هو مطلوب */
  --nav: #1F1F1F;
  --field: #191919;
  --border: #3A3A3A;        /* فواصل زخرفية فقط (1.4.11 لا تطالها) */
  --control: #8A8A8A;       /* حدود عناصر التحكم: 4.50:1 على البطاقة */

  /* ---------- النص ---------- */
  --text: #EDEDED;          /* 13.26:1 على البطاقة */
  --muted: #B0B7B2;         /*  7.59:1 على البطاقة */
  --primary: #2E7B4B;
  --primary-strong: #7CC79B;/* نص أخضر على الداكن: 7.76:1 */
  --primary-ink: #3FA06A;   /* أخضر غير نصي: 4.77:1 */
  --on-primary: #FFFFFF;    /*  5.18:1 على زر أخضر */
  --primary-soft: rgba(46, 123, 75, 0.18);

  /* ---------- أسماء قديمة kept as aliases onto the status pair inks ------
   * (index.html components still use --ban/--caution/--info; they now resolve
   * to the verified status colours, never to an unverified one). */
  --ban: var(--st-ban-ink);
  --caution: var(--st-review-ink);
  --info: var(--st-info-ink);
  --ok: var(--st-ok-ink);

  /* ---------- حالات الحالة: لون + أيقونة + نص معًا ---------- */
  /* محظور / مرفوض — أحمر */
  --st-ban: #F87171;         /*  5.61:1 نص على البطاقة */
  --st-ban-ink: #F87171;     /*  6.03:1 على الخلفية (غير نصي) */
  --st-ban-icon: "ban";
  --st-ban-soft: rgba(248, 113, 113, 0.14);
  /* قيد مراجعة / إيقاف مؤقت — كهرماني */
  --st-review: #F5C24B;      /*  9.39:1 */
  --st-review-ink: #F5C24B;  /* 10.08:1 على الخلفية */
  --st-review-icon: "caution";
  --st-review-soft: rgba(245, 194, 75, 0.14);
  /* معتمد / نشط — أخضر */
  --st-ok: #5FCF8D;          /*  7.98:1 */
  --st-ok-ink: #5FCF8D;      /*  8.57:1 على الخلفية */
  --st-ok-icon: "check";
  --st-ok-soft: rgba(95, 207, 141, 0.14);
  /* معلومة / مرجع مقارن — أزرق */
  --st-info: #7FB8F5;        /*  7.45:1 */
  --st-info-ink: #7FB8F5;
  --st-info-icon: "info";
  --st-info-soft: rgba(127, 184, 245, 0.14);

  /* ---------- الطباعة (خطوط النظام فقط) ---------- */
  --font-latin: "Segoe UI", Tahoma, system-ui, -apple-system, Arial, sans-serif;
  --font-arabic: "Segoe UI", "Noto Sans Arabic", "Droid Arabic Kufi", Tahoma, system-ui, sans-serif;
  --fs-base: 16px;           /* الحد الأدنى المطلوب */
  --fs-farmer: 18px;         /* نص نتائج المزارع 18-20px */
  --fs-pro: 16px;
  --lh: 1.6;                 /* ≥ 1.5 */

  /* ---------- تراكب وكاميرا (كانت ألوانًا خامًا داخل index.html) ---------- */
  --overlay: rgba(0, 0, 0, 0.62);      /* خلفية زر الإزالة على الصورة */
  --scrim: rgba(0, 0, 0, 0.55);        /* خلفية التلميح والمؤشر */
  --on-overlay: #FFFFFF;               /* نص على التراكب: 15.3:1 */
  --overlay-line: rgba(255, 255, 255, 0.55);
  --overlay-line-soft: rgba(255, 255, 255, 0.25);
  --letterbox: #101010;                /* شريط surrounds الفيديو — ليس أسود نقيًا */
  --gauge-idle: #B0B7B2;               /* مؤشر الوضوح قبل أول قراءة */
  --gauge-red: #F87171;                /* نفس رمز حالة الحظر — لون واحد = معنى واحد */
  --gauge-amber: #F5C24B;
  --gauge-green: #5FCF8D;

  /* ---------- المسافات والحدود ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius: 14px; --radius-sm: 8px;
  --tap: 44px;               /* أصغر هدف لمس مسموح */

  /* ---------- الحركة (<200ms دائمًا) ---------- */
  --dur: 160ms;
  --dur-fast: 120ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ============================ الوضع الفاتح ============================ */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F8F5;
  --card: #FFFFFF;
  --nav: #FFFFFF;
  --field: #F4F8F5;
  --border: #C9D8CE;
  --control: #7A8C82;       /* 3.56:1 على البطاقة */
  --text: #14231A;          /* 16.34:1 */
  --muted: #4C5A52;         /*  7.26:1 */
  --primary: #2E7B4B;
  --primary-strong: #1C5A37;/*  8.18:1 */
  --primary-ink: #2E7B4B;   /*  5.18:1 */
  --on-primary: #FFFFFF;
  --primary-soft: rgba(46, 123, 75, 0.12);
  --st-ban: #A81B1B;        /*  7.40:1 */
  --st-ban-ink: #A81B1B;    /*  6.90:1 على الخلفية */
  --st-ban-soft: rgba(168, 27, 27, 0.10);
  --st-review: #8A4B04;     /*  6.80:1 */
  --st-review-ink: #8A4B04; /*  6.34:1 على الخلفية */
  --st-review-soft: rgba(138, 75, 4, 0.10);
  --st-ok: #17683C;         /*  6.81:1 */
  --st-ok-ink: #17683C;     /*  6.36:1 على الخلفية */
  --st-ok-soft: rgba(23, 104, 60, 0.10);
  --st-info: #1D4ED8;       /*  6.70:1 */
  --st-info-ink: #1D4ED8;
  --st-info-soft: rgba(29, 78, 216, 0.10);
}

/* نظام المستخدم يفضّل الفاتح ولم تُختر يدويًا بعد (يُضبط من app.js) */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg: #F4F8F5; --card: #FFFFFF; --nav: #FFFFFF; --field: #F4F8F5;
    --border: #C9D8CE; --control: #7A8C82;
    --text: #14231A; --muted: #4C5A52;
    --primary-strong: #1C5A37; --primary-ink: #2E7B4B;
    --st-ban: #A81B1B; --st-ban-ink: #A81B1B;
    --st-review: #8A4B04; --st-review-ink: #8A4B04;
    --st-ok: #17683C; --st-ok-ink: #17683C;
    --st-info: #1D4ED8; --st-info-ink: #1D4ED8;
  }
}

/* ============================ الأساسيات ============================ */
html, body { height: 100%; }

html { font-size: 16px; }

body {
  font-family: var(--font-latin);
  font-size: var(--fs-base);
  line-height: var(--lh);
  /* لا justify إطلاقًا — المحاذاة منطقية: start (يمين للعربية) */
  text-align: start;
}

/* العربية: محاذاة يمين دائمًا عبر السلسلة النظامية العربية */
html[lang="ar"], html[dir="rtl"] { font-family: var(--font-arabic); }
html[lang="ar"] body, html[dir="rtl"] body { text-align: right; }

/* أهداف اللمس: كل عنصر تفاعلي ≥ 44×44 */
button, a.btn, a.btn-primary, a.btn-outline, input, select, textarea,
[role="button"], .nav-item, .cat-code, .st-explain {
  min-height: var(--tap);
}
button, a.btn, a.btn-primary, a.btn-outline, [role="button"], .nav-item {
  min-width: var(--tap);
}
/* حدود عناصر التحكم بمعنى (1.4.11) — لا الفواصل الزخرفية */
input, select, textarea, .btn-outline, .cat-code, .st-explain {
  border-color: var(--control);
}

/* بطاقات النتائج الطويلة: تخطي الرسم خارج الشاشة */
article.result {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* ============================ الحركة ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}