/*
  Design Tokens — منصة تجويدي
  المصدر الوحيد المعتمد: TAJWEEDI_EXPERIENCE_DESIGN_FOUNDATION.html (القسم 4/5)
  لا تُضف أو تُغيّر قيمًا هنا إلا بعد تحديث الوثيقة أولًا.
*/
:root{
  /* سماوي */
  --sky-50:#EFF8FB;  --sky-100:#DBF0F6; --sky-200:#B3E1EE; --sky-300:#82CBE1;
  --sky-500:#2B93C4; --sky-600:#1F7CAA; --sky-700:#186289;

  /* فستقي */
  --pist-50:#F1F8F0; --pist-100:#E0F0DD; --pist-200:#C2E2BE; --pist-300:#9CD096;
  --pist-500:#5FA562; --pist-600:#4C8B4F; --pist-700:#3C7040;

  /* كحلي — عناوين ونصوص مهمة فقط */
  --navy:#1C3550; --navy-2:#2C4A68;

  /* محايدات */
  --ivory:#FBFAF7; --white:#FFFFFF; --ink:#28323C; --muted:#6B7686;
  --line:rgba(27,53,80,.1);

  /* دلالية: خطأ/تنبيه */
  --danger:#D96C63; --danger-bg:#FBECEA; --danger-100:#F6DDDA;
  --danger-600:#C94236; --danger-700:#7E2C25;

  /* مقاييس */
  --radius-lg:26px; --radius-md:16px; --radius-sm:10px;
  --shadow-sm:0 4px 14px rgba(27,53,80,.07);
  --shadow-md:0 12px 30px rgba(27,53,80,.09);
  --shadow-lg:0 24px 48px rgba(27,53,80,.14);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  --dur-fast:120ms; --dur-base:200ms; --dur-scene:320ms;
  --ease-tajweedi:cubic-bezier(.22,.61,.36,1);

  --font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-family);
  line-height:1.75;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;display:block;}

/* حالة Focus موحّدة عبر المنصة (معيار الوصول) */
:focus-visible{
  outline:3px solid var(--sky-300);
  outline-offset:2px;
  border-radius:6px;
}

/* زخرفة الخلفية العامة — نمط هندسي خفيف جدًا بالسماوي */
.bg-pattern::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232B93C4' stroke-width='1.2'%3E%3Cpath d='M60 4 L110 34 L110 86 L60 116 L10 86 L10 34 Z'/%3E%3Cpath d='M60 4 L60 40 M110 34 L82 52 M110 86 L82 68 M60 116 L60 80 M10 86 L38 68 M10 34 L38 52'/%3E%3Ccircle cx='60' cy='60' r='18'/%3E%3C/g%3E%3C/svg%3E");
  background-size:130px 130px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Skeleton / Loading */
.skeleton{
  background:linear-gradient(90deg, var(--sky-50) 25%, var(--sky-100) 37%, var(--sky-50) 63%);
  background-size:400% 100%;
  animation:skeleton-wave 1.4s ease infinite;
  border-radius:var(--radius-sm);
}
@keyframes skeleton-wave{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* Empty / Error states */
.state-box{
  text-align:center; padding:var(--space-12) var(--space-6);
  color:var(--muted); font-size:14px;
}
.state-box .ic{font-size:34px; margin-bottom:var(--space-3);}
.state-box.error{color:var(--danger-700);}