/* ============================================================
   Tawsila — Design tokens
   Brand: sky blue + white, trust & technology
   ============================================================ */
:root {
  /* brand */
  --sky-50:#F0F9FF;  --sky-100:#E0F2FE; --sky-200:#BAE6FD;
  --sky-300:#7DD3FC; --sky-400:#38BDF8; --sky-500:#0EA5E9;
  --sky-600:#0284C7; --sky-700:#0369A1; --sky-800:#075985;
  --sky-900:#0C4A6E; --sky-950:#082F49;

  /* semantic roles — light */
  --bg:#F4F9FD;
  --bg-elev:#FFFFFF;
  --bg-sunken:#EAF3FA;
  --bg-glass:rgba(255,255,255,.72);
  --text:#0F172A;
  --text-2:#334155;
  --muted:#64748B;
  --muted-2:#94A3B8;
  --border:#DDEBF5;
  --border-strong:#C2DCEB;
  --primary:#0284C7;
  --primary-hover:#0369A1;
  --primary-soft:var(--sky-100);
  --on-primary:#FFFFFF;
  --accent:#F59E0B;
  --on-accent:#0F172A;
  --success:#059669; --success-soft:#D1FAE5;
  --danger:#DC2626;  --danger-soft:#FEE2E2;
  --warning:#D97706; --warning-soft:#FEF3C7;
  --info:#0284C7;    --info-soft:#E0F2FE;
  --grad-primary:linear-gradient(135deg,var(--sky-500),var(--sky-700));
  --grad-brand:linear-gradient(120deg,var(--sky-400),var(--sky-600) 60%,var(--sky-800));

  /* map */
  --map-water:#CDE8F6; --map-road:#FFFFFF; --map-land:#F2F7FA;

  /* geometry */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --shadow:0 8px 28px rgba(2,132,199,.10);
  --shadow-lg:0 18px 48px rgba(8,47,73,.16);
  --shadow-glow:0 10px 34px rgba(14,165,233,.34);
  --ring:0 0 0 4px rgba(14,165,233,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.22s;
  --icon-sm:16px; --icon:20px; --icon-lg:24px;

  --font:'Noto Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Noto Kufi Arabic','Noto Sans Arabic',system-ui,sans-serif;
  --fs-xs:.75rem; --fs-sm:.82rem; --fs-base:.94rem; --fs-md:1.05rem;
  --fs-lg:1.3rem; --fs-xl:1.7rem; --fs-2xl:2.2rem; --fs-3xl:3rem;

  --navbar-h:64px;
  --sidebar-w:264px;
}

html[data-theme="dark"] {
  --bg:#070E19;
  --bg-elev:#101B2C;
  --bg-sunken:#0B1524;
  --bg-glass:rgba(13,23,38,.78);
  --text:#F1F7FC;
  --text-2:#CBD9E6;
  --muted:#8FA6BC;
  --muted-2:#6B8299;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.18);
  --primary:#38BDF8;
  --primary-hover:#7DD3FC;
  --primary-soft:rgba(56,189,248,.14);
  --on-primary:#04121F;
  --accent:#FBBF24;
  --success:#34D399; --success-soft:rgba(52,211,153,.14);
  --danger:#F87171;  --danger-soft:rgba(248,113,113,.14);
  --warning:#FBBF24; --warning-soft:rgba(251,191,36,.14);
  --info:#38BDF8;    --info-soft:rgba(56,189,248,.14);
  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 22px 60px rgba(0,0,0,.55);
  --shadow-glow:0 10px 34px rgba(56,189,248,.28);
  --map-water:#0B2A3F; --map-road:#1B2A3E; --map-land:#101C2E;
}