/* ════════════════════════════════════════════════════════════════════════════
 * atheer-tone-purity.css — نقاء الصبغة في بطاقات المؤشّرات.
 *
 * المشكلة المقيسة: خلفيّات الشارات في الوضع الفاتح ألوانٌ **مغبَّرة** اختيرت
 * يدويًّا ولا تشترك في صبغةِ لونها الأماميّ:
 *
 *     --at-danger  #c81e4a  ←→  --at-danger-bg  #f3cdd6   (ورديٌّ رماديّ)
 *     --at-info    #0369a1  ←→  --at-info-bg    #c2dae8   (أزرقٌ باهت)
 *     --at-warning #946200  ←→  --at-warning-bg #e2d5bb   (بيجٌ لا أصفر)
 *
 * فالبطاقة تبدو بلا لون بجوار دوائر الأحرف المشبعة في الجدول نفسه — والعين
 * تقرأ ذلك «تعطُّلًا» لا «هدوءًا».
 *
 * ── الحلّ: التخفيف من اللون نفسه لا لونٌ ثانٍ ───────────────────────────────
 * `color-mix` تُنتج الخلفيّة من **الصبغة الأماميّة عينها**، فيبقى الأحمر أحمر
 * بالدرجة نفسها والأزرق أزرق. ومزيّةٌ ثانية: تتبع السمة تلقائيًّا — لا حاجة
 * إلى جدولٍ ثانٍ من الألوان للوضع الداكن يُنسى تحديثه.
 *
 * ⚠️ تُحمَّل **بعد** atheer-neon.css: تلك تعرّف `--at-*-bg` وتستعملها، وأيّ
 * قاعدةٍ قبلها تُغلَب. (رُصد: قواعد الجسر في السطر ١٥٠ لا أثر لها لهذا السبب.)
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── شارة الأيقونة ───────────────────────────────────────────────────────── */
.at-metric-card[data-tone="info"]    .at-metric-card__icon,
.at-metric-card[data-tone="brand"]   .at-metric-card__icon {
  color: var(--at-info, #0369a1);
  background: color-mix(in srgb, var(--at-info, #0369a1) 15%, var(--surface-1, #fff));
}
.at-metric-card[data-tone="success"] .at-metric-card__icon {
  color: var(--at-success, #007a52);
  background: color-mix(in srgb, var(--at-success, #007a52) 15%, var(--surface-1, #fff));
}
.at-metric-card[data-tone="warning"] .at-metric-card__icon {
  color: var(--at-warning, #946200);
  background: color-mix(in srgb, var(--at-warning, #946200) 15%, var(--surface-1, #fff));
}
.at-metric-card[data-tone="danger"]  .at-metric-card__icon,
.at-metric-card[data-tone="error"]   .at-metric-card__icon {
  color: var(--at-danger, #c81e4a);
  background: color-mix(in srgb, var(--at-danger, #c81e4a) 15%, var(--surface-1, #fff));
}

/* ── الرقم ────────────────────────────────────────────────────────────────
 * يأخذ اللون كاملًا لا مخفَّفًا: هو ما تقرؤه العين أوّلًا، وتخفيفُه يجعل
 * البطاقة كلّها تبدو معطَّلة. */
.at-metric-card[data-tone="info"]    .at-metric-card__value,
.at-metric-card[data-tone="brand"]   .at-metric-card__value { color: var(--at-info, #0369a1); }
.at-metric-card[data-tone="success"] .at-metric-card__value { color: var(--at-success, #007a52); }
.at-metric-card[data-tone="warning"] .at-metric-card__value { color: var(--at-warning, #946200); }
.at-metric-card[data-tone="danger"]  .at-metric-card__value,
.at-metric-card[data-tone="error"]   .at-metric-card__value { color: var(--at-danger, #c81e4a); }

/* ── الحدّ العلويّ ────────────────────────────────────────────────────────
 * خيطٌ من اللون نفسه بدل تدرّجٍ باهت — يُعرَف نوع البطاقة من بعيد. */
.at-metric-card[data-tone="info"],
.at-metric-card[data-tone="brand"]   { border-block-start-color: var(--at-info, #0369a1); }
.at-metric-card[data-tone="success"] { border-block-start-color: var(--at-success, #007a52); }
.at-metric-card[data-tone="warning"] { border-block-start-color: var(--at-warning, #946200); }
.at-metric-card[data-tone="danger"],
.at-metric-card[data-tone="error"]   { border-block-start-color: var(--at-danger, #c81e4a); }

/* ── المؤشّرات في عميل الويب (`.at-metrics`) ──────────────────────────────
 * البطاقات هناك تُلوَّن سطريًّا بـ`color-mix` على `--ax-*-500`، وهي متّسقة
 * أصلًا. يُوحَّد نصف قطر الشارة فقط كي تتطابق الشاشتان. */
.at-metrics .card > span:first-child { border-radius: 10px; }