/* ==========================================================================
   WinMarket AI — رموز التصميم
   المصدر الوحيد للحقيقة. لا يُكتب لون صريح في أي ملف آخر.

   فلسفة اللون: الأرضيات هادئة ومتدرّجة بثلاث طبقات واضحة، والألوان الدلالية
   مشبعة بقدر ما يكفي للقراءة فقط — لا نيون. البنفسجي للعلامة والذكاء،
   ولا يعني صعودًا أبدًا.
   ========================================================================== */

:root {
  /* ---- الأرضيات: ثلاث طبقات + حبر ---- */
  --wmai-ink: #070a12;        /* خلفية الصفحة */
  --wmai-surface: #0d1322;    /* الشريط الجانبي والعلوي */
  --wmai-card: #111827;       /* البطاقات */
  --wmai-card-2: #172033;     /* بطاقة داخل بطاقة · التحويم */
  --wmai-elevated: #1c2739;   /* القوائم والنوافذ */

  /* ---- الحدود: بيضاء شفافة كي تنسجم فوق أي طبقة ---- */
  --wmai-line: rgba(255, 255, 255, 0.09);
  --wmai-line-soft: rgba(255, 255, 255, 0.055);
  --wmai-line-strong: rgba(255, 255, 255, 0.14);

  /* ---- لمعة علوية خفيفة تعطي البطاقة حافة مادية ---- */
  --wmai-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 42%);

  /* ---- النص ---- */
  --wmai-text: #f1f5fb;
  --wmai-text-2: #aab6cb;
  --wmai-muted: #78849c;
  --wmai-placeholder: #5a6580;

  /* ---- العلامة: بنفسجي الذكاء ---- */
  --wmai-brand: #8b5cf6;
  --wmai-brand-2: #a78bfa;
  --wmai-brand-3: #c4b5fd;
  --wmai-brand-deep: #5b3bc4;
  --wmai-brand-wash: rgba(139, 92, 246, 0.12);
  --wmai-brand-wash-2: rgba(139, 92, 246, 0.2);
  --wmai-brand-line: rgba(139, 92, 246, 0.3);

  /* ---- الأداء الإيجابي: زمرّد هادئ ---- */
  --wmai-rise: #34d399;
  --wmai-rise-deep: #10b981;
  --wmai-rise-wash: rgba(52, 211, 153, 0.11);
  --wmai-rise-line: rgba(52, 211, 153, 0.26);

  /* ---- التراجع: وردي هادئ بدل الأحمر الصارخ ---- */
  --wmai-fall: #fb7185;
  --wmai-fall-wash: rgba(251, 113, 133, 0.11);
  --wmai-fall-line: rgba(251, 113, 133, 0.26);

  /* ---- التحذير ونشاط الإعلانات: كهرماني ---- */
  --wmai-hot: #fbbf24;
  --wmai-hot-wash: rgba(251, 191, 36, 0.11);
  --wmai-hot-line: rgba(251, 191, 36, 0.26);

  /* ---- المعلومة: أزرق ---- */
  --wmai-info: #60a5fa;
  --wmai-info-wash: rgba(96, 165, 250, 0.11);
  --wmai-info-line: rgba(96, 165, 250, 0.26);

  /* ---- الخطوط ---- */
  --wmai-font-display: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --wmai-font-body: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", system-ui, sans-serif;
  --wmai-font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- سلّم الطباعة ---- */
  --wmai-fs-display: clamp(1.9rem, 3.6vw, 2.75rem);
  --wmai-fs-h1: clamp(1.55rem, 2.6vw, 2rem);
  --wmai-fs-h2: 1.45rem;
  --wmai-fs-h3: 1.1rem;
  --wmai-fs-h4: 0.98rem;
  --wmai-fs-body: 1rem;
  --wmai-fs-sm: 0.875rem;
  --wmai-fs-xs: 0.78rem;
  --wmai-fs-micro: 0.7rem;
  --wmai-lh-body: 1.8;
  --wmai-lh-tight: 1.32;

  /* ---- المسافات: مضاعفات 4 ---- */
  --wmai-s1: 4px;
  --wmai-s2: 8px;
  --wmai-s3: 12px;
  --wmai-s4: 16px;
  --wmai-s5: 24px;
  --wmai-s6: 32px;
  --wmai-s7: 48px;
  --wmai-s8: 64px;
  --wmai-s9: 96px;

  /* ---- الزوايا ---- */
  --wmai-r-xs: 8px;
  --wmai-r-sm: 12px;
  --wmai-r-md: 16px;
  --wmai-r-lg: 20px;
  --wmai-r-xl: 26px;
  --wmai-r-pill: 999px;

  /* ---- الظل: خافت وطبقيّ ---- */
  --wmai-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --wmai-shadow-2: 0 10px 28px -12px rgba(0, 0, 0, 0.65);
  --wmai-shadow-3: 0 28px 64px -24px rgba(0, 0, 0, 0.8);
  --wmai-glow-brand: 0 10px 34px -16px rgba(139, 92, 246, 0.6);

  /* ---- الهيكل ---- */
  --wmai-sidebar-w: 252px;
  --wmai-topbar-h: 66px;
  --wmai-mobilebar-h: 62px;
  --wmai-content-max: 1400px;

  /* ---- الحركة ---- */
  --wmai-t-fast: 150ms;
  --wmai-t-base: 220ms;
  --wmai-t-slow: 340ms;
  --wmai-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wmai-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* أدوات النغمة — currentColor يحمل لون الحالة إلى الأبناء */
.wmai-tone--rise { color: var(--wmai-rise); }
.wmai-tone--fall { color: var(--wmai-fall); }
.wmai-tone--hot { color: var(--wmai-hot); }
.wmai-tone--info,
.wmai-tone--new { color: var(--wmai-info); }
.wmai-tone--brand,
.wmai-tone--ai { color: var(--wmai-brand-2); }
.wmai-tone--neutral,
.wmai-tone--demo { color: var(--wmai-muted); }

.wmai-tone-bg--rise { background: var(--wmai-rise); }
.wmai-tone-bg--fall { background: var(--wmai-fall); }
.wmai-tone-bg--hot { background: var(--wmai-hot); }
.wmai-tone-bg--info,
.wmai-tone-bg--new { background: var(--wmai-info); }
.wmai-tone-bg--brand,
.wmai-tone-bg--ai { background: var(--wmai-brand); }
.wmai-tone-bg--neutral,
.wmai-tone-bg--demo { background: var(--wmai-muted); }

/* بلاطات الأيقونات الملوّنة — تعبئة خافتة + حد بلون الحالة */
.wmai-tint--rise { background: var(--wmai-rise-wash); border-color: var(--wmai-rise-line); color: var(--wmai-rise); }
.wmai-tint--fall { background: var(--wmai-fall-wash); border-color: var(--wmai-fall-line); color: var(--wmai-fall); }
.wmai-tint--hot { background: var(--wmai-hot-wash); border-color: var(--wmai-hot-line); color: var(--wmai-hot); }
.wmai-tint--info,
.wmai-tint--new { background: var(--wmai-info-wash); border-color: var(--wmai-info-line); color: var(--wmai-info); }
.wmai-tint--brand,
.wmai-tint--ai { background: var(--wmai-brand-wash); border-color: var(--wmai-brand-line); color: var(--wmai-brand-2); }
.wmai-tint--neutral { background: var(--wmai-card-2); border-color: var(--wmai-line); color: var(--wmai-muted); }