:root{
  --clay:#C0532A; --clay-600:#A94721;
  --gold:#E0A03C; --gold-200:#F5D9A8;
  --palm:#1F3D33; --palm-700:#162C25;
  --sand:#F6EDE1; --sand-50:#FCF8F2;
  --ink:#241A12;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(36,26,18,.06), 0 8px 24px rgba(36,26,18,.08);
  --font-ar:'Tajawal','Noto Sans SC',system-ui,sans-serif;
  --font-display:'Reem Kufi','Noto Sans SC',serif;

  /* رموز الوضع (نهاري/ليلي) — تُستخدم عبر Tailwind (bg-bg, text-fg, text-muted...)
     ويكفي تبديلها هنا لتنعكس على كل الموقع تلقائياً بدون لمس أي ملف عرض. */
  --bg-rgb: 252 248 242;      /* خلفية الصفحة: sand-50 */
  --fg-rgb: 36 26 18;         /* نص الصفحة: ink */
  --muted-rgb: 122 106 91;    /* نص ثانوي */
  --card-rgb: 255 255 255;    /* خلفية البطاقات */
  --heading-rgb: 31 61 51;    /* لون العناوين: نفس أخضر النخيل بالضبط في الوضع النهاري */
}

:root[data-theme="dark"]{
  --bg-rgb: 22 20 18;
  --fg-rgb: 236 229 220;
  --muted-rgb: 168 156 144;
  --card-rgb: 34 31 28;
  --heading-rgb: 147 200 186; /* نفس عائلة أخضر النخيل، بإضاءة أعلى تناسب الخلفية الداكنة */
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

html{ scroll-behavior:smooth; color-scheme:light; }
html[data-theme="dark"]{ color-scheme:dark; }
body{ font-family:var(--font-ar); }
h1,h2,h3{ font-family:var(--font-display); }

.card{
  background: rgb(var(--card-rgb));
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}

.btn-primary{
  background:var(--clay);
  color:#fff;
  border-radius:var(--r-pill);
  transition:background .15s ease;
}
.btn-primary:hover{ background:var(--clay-600); }

.aspect-route{ aspect-ratio: 3/2; }
@media (min-width:768px){ .aspect-route{ aspect-ratio: 16/9; } }

.no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

.stamp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }

.congestion-bar{ display:flex; height:8px; border-radius:999px; overflow:hidden; }
.congestion-bar > span{ flex:1; }

#map{ min-height:280px; border-radius:var(--r-lg); z-index:0; }

::selection{ background:var(--gold-200); }

/* نافذة منبثقة (dialog) لعرض محتوى إضافي دون إثقال الصفحة */
dialog.modal-sheet{
  border:none; padding:0; margin:auto;
  width:calc(100% - 2rem); max-width:420px; max-height:85vh;
  border-radius:var(--r-lg);
  background: rgb(var(--card-rgb));
  color: rgb(var(--fg-rgb));
  box-shadow:var(--shadow-card);
  overflow-y:auto;
}
dialog.modal-sheet::backdrop{ background: rgba(0,0,0,.55); }
dialog.modal-sheet[open]{ animation: modal-in .18s ease-out; }
@keyframes modal-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }