/*
 * أجرة عُمان — متغيرات التصميم (نظام تصميم «مجيد» نفسه: docs/design-kit.md، قرار صاحب المشروع 2026-10-03).
 * أسماء المتغيرات وقيمها كما في مجيد، ومنها الأزرق المخضر #17606d ودرجاته والكهرماني (قرار صاحب المشروع 2026-10-08)
 * (يحل محل أزرق 2026-10-05). التباين: --brand 7:1 على الأبيض. --brand-bright للمساحات الكبيرة فقط، لا للنص الصغير.
 * يُستخدم في غرفة التحكم والموقع العام. الوضع الليلي بالصنف .dark على <html> (تلقائي حسب الجهاز، ويدوي من زر المظهر).
 */
:root {
  /* canvas & surfaces */
  --bg: #f5f7f8;
  --surface: #ffffff;
  --surface-2: #f3f6f7;
  --surface-3: #e7edef;
  --ink: #132a2f;
  --ink-2: #455a5f;
  --ink-3: #617378;
  --line: #e3e9eb;
  --line-strong: #cdd8db;
  /* brand — OmanTaxi */
  --brand: #17606d;        /* أزرق Majestic (قرار صاحب المشروع 2026-10-05): الأزرار والروابط والعنصر النشط (4.7:1 على الأبيض) */
  --brand-strong: #114c57;
  --brand-bright: #1b8497; /* مساحات كبيرة ورسوم فقط */
  --brand-deep: #0a3239;   /* بداية تدرج الهوية */
  --brand-ink: #ffffff;
  --brand-soft: #e5f3f5;
  --accent: #8a5600;       /* نص كهرماني */
  --gold: #f8aa1f;         /* تعبئة كهرمانية («مجيد») */
  --gold-soft: #fff4de;
  /* بقية القيم كما في مجيد */
  --terracotta: #b4543a;
  --terracotta-soft: #fbeae4;
  --sand: #fff4de;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --ok: #1a7a45;
  --ok-soft: #e4f4ea;
  --warn-soft: #fff4de;
  --info: #1b8497;
  --info-soft: #e5f3f5;
  --shadow-card: 0 1px 2px rgb(19 42 47 / 0.05);
  --shadow-pop: 0 10px 28px -8px rgb(19 42 47 / 0.2), 0 2px 6px rgb(19 42 47 / 0.06);
  --radius-card: 0.75rem;
  --radius-control: 0.5rem;
  --side-bg: #ffffff;
  --side-ink: #132a2f;
  --side-ink-2: #617378;
  --side-hover: #f1f5f6;
  --side-active: var(--brand-soft);
  --side-active-ink: var(--brand);
  --side-mark: var(--brand);
  --side-line: #e3e9eb;
  --side-badge: var(--gold);
  --side-badge-ink: #132a2f;
  --chart-1: #229aae;
  --chart-2: #f0a01a;
  --chart-3: #4f63c4;
  --chart-4: #d9674a;
  --chart-5: #8b6cc4;
  --chart-grid: #e7edef;
  --chart-axis: #617378;
  --font-ui: Tajawal, "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

:root.dark,
:root[data-theme="dark"] {
  --bg: #0b1417;
  --surface: #111d21;
  --surface-2: #16252a;
  --surface-3: #1e3036;
  --ink: #e6eef0;
  --ink-2: #a5b6ba;
  --ink-3: #85979c;
  --line: #22353b;
  --line-strong: #2f464d;
  --brand: #5ec3d3;
  --brand-strong: #9dbdf8;
  --brand-bright: #1b8497;
  --brand-ink: #0b1a33;
  --brand-soft: #16284a;
  --accent: #f8b94a;
  --gold: #f5a524;
  --gold-soft: #33280f;
  --terracotta: #e98b6f;
  --terracotta-soft: #3a2119;
  --sand: #33280f;
  --danger: #f0776c;
  --danger-soft: #3a1d1a;
  --ok: #5cc486;
  --ok-soft: #173020;
  --warn-soft: #33280f;
  --info: #8fdce8;
  --info-soft: #0f3a42;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / 0.6);
  --side-bg: #0e191c;
  --side-ink: #e6eef0;
  --side-ink-2: #8fa2a7;
  --side-hover: rgb(255 255 255 / 0.05);
  --side-active-ink: var(--brand-strong);
  --side-line: #1c2d32;
  --chart-1: #3bb4c8;
  --chart-2: #f0a01a;
  --chart-3: #7b8ce0;
  --chart-4: #e58064;
  --chart-5: #a88ddb;
  --chart-grid: #22353b;
  --chart-axis: #85979c;
  color-scheme: dark;
}

.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}