/* ============================================================
   بلدية نمرين وبكوزا — الرموز التصميمية (Design Tokens)
   ------------------------------------------------------------
   الألوان الثلاثة الأساسية مسحوبة من شعار البلدية مباشرة:
     الأخضر الداكن  #185333   ← إطار الشعار والجبل
     البني الداكن   #74342A   ← الجسر
     الأزرق المائي  #3A96B4   ← الينابيع
   التدرّجات مضبوطة يدوياً لا حسابياً، لأن الاشتقاق الآلي
   من لون داكن مشبع يُنتج درجات فاقعة لا تنتمي إلى الهوية.
   ============================================================ */

:root{
  /* ── الأخضر: اللون الأساسي ───────────────────────────── */
  --green-50:#F1F7F3;
  --green-100:#DDEBE2;
  --green-200:#BBD7C5;
  --green-300:#8DBB9E;
  --green-400:#4E8E68;
  --green-500:#185333;   /* لون الشعار */
  --green-600:#14462C;
  --green-700:#103824;
  --green-800:#0C2A1B;
  --green-900:#081C12;

  /* ── البني: اللون الثانوي، للعناوين والتمييز ─────────── */
  --brick-50:#FAF1EF;
  --brick-100:#F2DDD9;
  --brick-200:#E4BBB3;
  --brick-300:#CE9187;
  --brick-400:#A75B4C;
  --brick-500:#74342A;   /* لون الشعار */
  --brick-600:#632C24;
  --brick-700:#4F231D;
  --brick-800:#3B1A15;
  --brick-900:#29120E;

  /* ── الأزرق المائي: لون التمييز والروابط الفعّالة ────── */
  --water-50:#EFF7FA;
  --water-100:#D9EDF3;
  --water-200:#B3DAE7;
  --water-300:#7FBFD5;
  --water-400:#55A8C4;
  --water-500:#3A96B4;   /* لون الشعار */
  --water-600:#2F7B94;
  --water-700:#266275;
  --water-800:#1E4D5C;
  --water-900:#173B47;

  /* ── محايدات مائلة إلى الأخضر لتنسجم مع الهوية ───────── */
  --n-0:#FFFFFF;
  --n-25:#FAFCFA;
  --n-50:#F4F8F5;
  --n-100:#EDF2EE;
  --n-200:#E3EBE2;
  --n-300:#CBD6CB;
  --n-400:#9DAB9F;
  --n-500:#75857A;
  --n-600:#5D6B62;
  --n-700:#44514A;
  --n-800:#2A342E;
  --n-900:#14201A;

  /* ── ألوان دلالية ─────────────────────────────────────── */
  --ok:#2E6B3E;        --ok-bg:#EDF6EE;      --ok-bd:#CBE2CE;
  --warn:#8A5A12;      --warn-bg:#FDF5E9;    --warn-bd:#EEDCBE;
  --danger:#9B2C20;    --danger-bg:#FBEEEC;  --danger-bd:#EFD2CD;
  --info:var(--water-700); --info-bg:var(--water-50); --info-bd:var(--water-200);

  /* ── أدوار لونية (استعمل هذه لا الأرقام مباشرة) ──────── */
  --brand:var(--green-500);
  --brand-dark:var(--green-700);
  --brand-soft:var(--green-50);
  --accent:var(--brick-500);
  --highlight:var(--water-500);

  --bg:var(--n-50);
  --surface:var(--n-0);
  --surface-2:var(--n-25);
  --line:var(--n-200);
  --line-strong:var(--n-300);
  --text:var(--n-900);
  --text-mute:var(--n-600);
  --text-soft:var(--n-500);
  --text-invert:var(--n-0);

  /* ── الخطوط ───────────────────────────────────────────── */
  --font-ui:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --font-display:"Readex Pro","IBM Plex Sans Arabic",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16px;
  --fs-lg:18px; --fs-xl:21px; --fs-2xl:26px; --fs-3xl:32px;
  --lh-tight:1.35; --lh-normal:1.7; --lh-loose:1.9;

  /* ── المسافات ─────────────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* ── الحواف والظلال ───────────────────────────────────── */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(20,32,26,.06);
  --shadow-md:0 2px 8px rgba(20,32,26,.07), 0 1px 2px rgba(20,32,26,.04);
  --shadow-lg:0 8px 28px rgba(20,32,26,.10), 0 2px 6px rgba(20,32,26,.05);
  --ring:0 0 0 3px var(--water-200);

  /* ── القياسات ─────────────────────────────────────────── */
  --sidebar-w:250px;
  --topbar-h:60px;
  --content-max:1180px;
  --tap:44px;              /* أصغر مساحة لمس مقبولة */

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.18s;
}

/* الوضع الداكن مؤجَّل عمداً: لوحة تحكم بلدية تُستعمل نهاراً،
   وإضافته الآن تضاعف سطح الاختبار بلا حاجة فعلية. */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--lh-tight);margin:0}

a{color:var(--water-700);text-decoration:none}
a:hover{text-decoration:underline}

img{max-width:100%;height:auto}

:focus-visible{outline:2px solid var(--water-500);outline-offset:2px;border-radius:var(--r-sm)}

[hidden]{display:none!important}

::selection{background:var(--green-200);color:var(--green-900)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}