/* =====================================================================
   🎨 ألوان "بدر" — المكان الوحيد لكل ألوان التطبيقين (الزبون، الكابتن، الإدارة)
   ---------------------------------------------------------------------
   1) لوحة الألوان الأساسية (--c-*): القيم الخام. غيّر هنا فقط.
   2) الأدوار (--bg, --surface, --text, --brand...): ما تستخدمه ملفات التصميم.
   3) الوضع الليلي وتطبيق الكابتن يعيدان تعريف الأدوار فقط.
   ملفات CSS الأخرى لا تحتوي أي لون مكتوب مباشرة — كلها var(--…)
   أو color-mix(in srgb, var(--…) N%, transparent) للشفافية.
   ===================================================================== */
:root {
  /* ---------- 1) لوحة بدر ---------- */
  --c-navy: #0F1B3D;          /* الرئيسي: كحلي ليلي */
  --c-navy-990: #030713;      /* خلفية الكابتن */
  --c-navy-950: #050A1C;
  --c-navy-900: #0A1430;
  --c-navy-800: #0F1B3D;
  --c-navy-700: #172A5C;
  --c-midnight: #1E3A7B;      /* أزرق ليلي (نهاية تدرج الكحلي) */
  --c-midnight-2: #2D55A8;
  --c-sky: #8FB2FF;
  --c-gold: #F5C542;          /* الثانوي: ذهبي قمري */
  --c-gold-light: #FFE08A;
  --c-gold-deep: #D9A21F;
  --c-orange-light: #FFB266;  /* نهاية تدرج الذهبي */
  --c-gold-text: #8A5A00;     /* ذهبي غامق للنصوص على الكريمي (تباين كافٍ) */
  --c-cream: #FFF8E7;         /* الخلفيات الفاتحة */
  --c-cream-2: #FBF0D6;
  --c-cream-3: #F3E4BF;
  --c-cream-line: #EADCB8;
  --c-paper: #FFFDF8;
  --c-slate: #545E7C;         /* نص ثانوي على الفاتح */
  --c-mist: #AEB8D6;          /* نص ثانوي على الغامق */
  --c-moonlight: #F7F1E1;     /* نص رئيسي على الغامق */
  --c-white: #FFFFFF;
  --c-black: #000000;

  --c-green: #0FA968;
  --c-green-light: #5EE0B5;
  --c-red: #E5484D;
  --c-red-light: #F2545B;
  --c-red-deep: #B91C1C;
  --c-amber: #D97706;
  --c-amber-deep: #B45309;
  --c-amber-light: #F59E0B;
  --c-coral: #FF9F68;
  --c-blue: #3B82F6;
  --c-blue-light: #93C5FD;
  --c-blue-plate: #1D4ED8;
  --c-blue-user: #2F80ED;
  --c-wa-1: #3BE17F;          /* واتساب */
  --c-wa-2: #1DAA61;
  --c-wa-3: #128C4F;
  --c-wa: #25D366;
  --c-wa-dark: #0B141A;
  --c-grey-100: #F3F4F6;
  --c-grey-200: #E5E7EB;
  --c-grey-300: #D1D5DB;
  --c-grey-400: #9CA3AF;
  --c-grey-500: #6B7280;
  --c-grey-700: #374151;
  --c-grey-800: #1F2937;
  --c-grey-900: #111827;

  /* ---------- التدرجات ---------- */
  --grad-gold: linear-gradient(135deg, var(--c-gold-light) 0%, var(--c-gold) 45%, var(--c-orange-light) 100%);
  --grad-navy: linear-gradient(150deg, var(--c-midnight) 0%, var(--c-navy-700) 45%, var(--c-navy) 100%);
  --grad-navy-2: linear-gradient(140deg, var(--c-midnight-2) 0%, var(--c-midnight) 45%, var(--c-navy) 100%);
  --grad-navy-3: linear-gradient(160deg, var(--c-navy-700) 0%, var(--c-navy) 50%, var(--c-navy-900) 100%);
  --grad-navy-deep: linear-gradient(160deg, var(--c-navy-700) 0%, var(--c-navy-900) 55%, var(--c-navy-950) 100%);
  --grad-sky: radial-gradient(120% 70% at 70% 0%, var(--c-midnight) 0%, var(--c-navy) 45%, var(--c-navy-950) 100%);
  --moon-glow: radial-gradient(circle, color-mix(in srgb, var(--c-gold) 55%, transparent), transparent 65%);

  /* أسماء مستخدمة في ملفات التصميم (تشير للوحة أعلاه) */
  --gold-1: var(--c-gold-light);
  --gold: var(--c-gold);
  --gold-2: var(--c-orange-light);
  --ink: var(--c-navy);
  --ink-2: var(--c-midnight);
  --ink-deep: var(--c-navy-950);
  --violet: var(--c-midnight-2);
  --grad-ink: var(--grad-navy);
  --grad-violet: var(--grad-navy-2);

  /* ---------- 2) الأدوار — الوضع الفاتح (كريمي) ---------- */
  --brand: var(--c-gold);
  --brand-strong: var(--c-gold-text);
  --on-brand: var(--c-navy);
  --bg: var(--c-cream);
  --surface: var(--c-paper);
  --surface-2: var(--c-cream-2);
  --surface-3: var(--c-cream-3);
  --border: var(--c-cream-line);
  --text: var(--c-navy);
  --muted: var(--c-slate);
  --success: var(--c-green);
  --danger: var(--c-red);
  --danger-soft: color-mix(in srgb, var(--c-red) 12%, transparent);
  --warn: var(--c-amber);
  --pickup: var(--c-green);
  --dropoff: var(--c-navy);
  --route: var(--c-midnight);
  --online: var(--c-green);
  --chart-bar: var(--c-midnight);

  --grad-page: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--c-gold) 14%, transparent), transparent 60%), radial-gradient(100% 50% at 0% 100%, color-mix(in srgb, var(--c-midnight) 8%, transparent), transparent 60%);
  --glass: color-mix(in srgb, var(--c-paper) 66%, transparent);
  --glass-strong: color-mix(in srgb, var(--c-paper) 86%, transparent);
  --glass-border: color-mix(in srgb, var(--c-white) 75%, transparent);
  --shadow-sm: 0 2px 10px color-mix(in srgb, var(--c-navy) 8%, transparent);
  --shadow: 0 18px 44px color-mix(in srgb, var(--c-navy) 17%, transparent);
  --shadow-gold: 0 12px 28px -6px color-mix(in srgb, var(--c-orange-light) 55%, transparent);
  --shadow-navy: 0 20px 38px -18px color-mix(in srgb, var(--c-navy) 75%, transparent);
  --ring: 0 0 0 4px color-mix(in srgb, var(--c-gold) 30%, transparent);
  --stars: none;
  color-scheme: light;
}

/* ---------- 3) الوضع الليلي: سماء كحلية ونجوم وذهب القمر ---------- */
[data-theme="dark"] {
  --brand-strong: var(--c-gold);
  --bg: var(--c-navy-950);
  --surface: var(--c-navy-900);
  --surface-2: var(--c-navy);
  --surface-3: var(--c-navy-700);
  --border: color-mix(in srgb, var(--c-midnight) 55%, var(--c-navy));
  --text: var(--c-moonlight);
  --muted: var(--c-mist);
  --danger-soft: color-mix(in srgb, var(--c-red) 20%, transparent);
  --dropoff: var(--c-moonlight);
  --route: var(--c-gold);
  --chart-bar: var(--c-gold);
  --grad-page: radial-gradient(110% 55% at 100% 0%, color-mix(in srgb, var(--c-midnight) 45%, transparent), transparent 65%), radial-gradient(90% 45% at 0% 100%, color-mix(in srgb, var(--c-gold) 7%, transparent), transparent 60%);
  --glass: color-mix(in srgb, var(--c-navy-900) 64%, transparent);
  --glass-strong: color-mix(in srgb, var(--c-navy-900) 88%, transparent);
  --glass-border: color-mix(in srgb, var(--c-white) 9%, transparent);
  --shadow-sm: 0 2px 10px color-mix(in srgb, var(--c-black) 45%, transparent);
  --shadow: 0 18px 44px color-mix(in srgb, var(--c-black) 60%, transparent);
  --shadow-gold: 0 12px 30px -8px color-mix(in srgb, var(--c-gold) 45%, transparent);
  --ring: 0 0 0 4px color-mix(in srgb, var(--c-gold) 25%, transparent);
  /* نجوم خفيفة في الخلفية */
  --stars: radial-gradient(1.2px 1.2px at 12% 18%, color-mix(in srgb, var(--c-moonlight) 70%, transparent), transparent),
    radial-gradient(1px 1px at 68% 8%, color-mix(in srgb, var(--c-moonlight) 60%, transparent), transparent),
    radial-gradient(1.4px 1.4px at 86% 32%, color-mix(in srgb, var(--c-gold-light) 70%, transparent), transparent),
    radial-gradient(1px 1px at 34% 44%, color-mix(in srgb, var(--c-moonlight) 50%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 52% 72%, color-mix(in srgb, var(--c-moonlight) 55%, transparent), transparent),
    radial-gradient(1px 1px at 8% 86%, color-mix(in srgb, var(--c-gold-light) 55%, transparent), transparent);
  color-scheme: dark;
}

/* ---------- تطبيق كابتن بدر: كحلي أغمق دائماً والذهبي هو البارز ---------- */
html[data-app="captain"] {
  --brand-strong: var(--c-gold);
  --bg: var(--c-navy-990);
  --surface: var(--c-navy-950);
  --surface-2: var(--c-navy-900);
  --surface-3: var(--c-navy);
  --border: color-mix(in srgb, var(--c-midnight) 40%, var(--c-navy-900));
  --text: var(--c-moonlight);
  --muted: var(--c-mist);
  --dropoff: var(--c-moonlight);
  --route: var(--c-gold);
  --chart-bar: var(--c-gold);
  --grad-page: radial-gradient(110% 55% at 100% 0%, color-mix(in srgb, var(--c-midnight) 35%, transparent), transparent 65%);
  --glass: color-mix(in srgb, var(--c-navy-950) 66%, transparent);
  --glass-strong: color-mix(in srgb, var(--c-navy-950) 90%, transparent);
  --glass-border: color-mix(in srgb, var(--c-white) 8%, transparent);
  color-scheme: dark;
}