/* =========================================================
   دوحة المداد — main.css
   التصميم الأساسي: الألوان، الخطوط، الشبكة، التجاوب
   ========================================================= */

:root{
  /* -- لوحة الألوان: دوحة دافئة (كريمي، بنّي، ذهبي) --
     أسماء المتغيرات (ink/paper/gold...) أُبقيت كما هي لتفادي
     إعادة كتابة كل ملفات CSS/JS، لكن قيمها الآن تمثّل الهوية
     الدافئة الجديدة بدل هوية الحبر الداكن السابقة. */
  --ink-950:#FBF3E4;   /* خلفية الصفحة (الأفتح) */
  --ink-900:#F8ECD9;   /* خلفية عامة */
  --ink-800:#FCF6EA;   /* خلفية البطاقات */
  --ink-700:#EFDFC2;   /* حدود وفواصل */
  --ink-600:#E4CFA8;   /* حدود أغمق قليلاً */
  --ink-500:#C9A96F;   /* عناصر ثانوية */

  --paper:#4A3524;      /* النص الأساسي (بنّي غامق) */
  --paper-dim:#8A6F52;   /* نص ثانوي */
  --paper-faint:#B49A76;  /* نص خافت */

  --gold:#C98A2E;
  --gold-soft:#A9782F;
  --ember:#C1601E;
  --ember-soft:#8F4A1D;
  --wine:#8C3B2F;
  --sage:#71875A;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;

  --shadow-1:0 2px 10px rgba(74,53,36,.10);
  --shadow-2:0 14px 34px rgba(74,53,36,.16);

  --font-display:"Noto Naskh Arabic", serif;
  --font-brand:"Amiri", "Noto Naskh Arabic", serif;
  --font-logo:"Aref Ruqaa Ink", "Amiri", serif;
  --font-accent:"Amiri", "Noto Naskh Arabic", serif;
  --font-body:"Tajawal", sans-serif;

  --header-h:68px;
  --container:1180px;

  /* -- ألوان تمييز إضافية مستوحاة من لوحات دافئة (بدرجة خفيفة، لبطاقات الإحصائيات وأشرطة الفعاليات) -- */
  --accent-olive:#B7B190;
  --accent-tan:#D3AA88;
  --accent-rust:#C68D7E;
  --accent-slate:#A9B7B7;
  --olive-light:#F7F4EC;
  --olive-mid:#EAE3D0;
  --olive-deep:#9B9376;
  --sky-light:#EEF8FD;
  --sky-mid:#D4EAF5;
  --sky-deep:#8DB8D0;

  color-scheme: light;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(200,155,60,.08), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(140,47,57,.10), transparent 55%),
    var(--ink-900);
  color:var(--paper);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--paper);
  margin:0 0 .5em;
  line-height:1.35;
  font-weight:700;
  display:flex; align-items:center; gap:10px;
}
h1,h2,h3{ font-family:"Amiri", "Noto Naskh Arabic", serif !important; }
h1,h2{ font-weight:700 !important; }
h1{ font-size:clamp(1.9rem, 3.2vw, 2.9rem); }
h2{ font-size:clamp(1.5rem, 2.4vw, 2.1rem); }
h3{ font-size:1.25rem; }
h3{ display:block; }
.heading-icon{ color:var(--gold); flex-shrink:0; }
p{ margin:0 0 1em; color:var(--paper-dim); line-height:1.95; }

a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--paper); }

ul{ margin:0; padding:0; list-style:none; }

img{ max-width:100%; display:block; }

button{ font-family:inherit; }

/* -- إتاحة الوصول: تركيز لوحة المفاتيح -- */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* -- الحاوية العامة -- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.section{ padding:56px 0; }
.section--tight{ padding:32px 0; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.section-head .eyebrow{
  display:block;
  font-family:var(--font-accent);
  font-weight:600;
  color:var(--gold);
  font-size:1.05rem;
  letter-spacing:.01em;
  margin-bottom:4px;
}

.text-center{ text-align:center; }
.text-muted{ color:var(--paper-faint); }

/* -- شعلة تحميل الحبر -- */
#ink-drop-loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink-900);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#ink-drop-loader span{
  width:14px; height:14px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 24px 6px rgba(200,155,60,.5);
  animation:ink-pulse 1.1s ease-in-out infinite;
}
@keyframes ink-pulse{
  0%,100%{ transform:scale(1); opacity:.6; }
  50%{ transform:scale(2.6); opacity:1; }
}
#ink-drop-loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

/* -- المحتوى الرئيسي -- */
#app-root{ min-height:60vh; display:block; }
#app-root:focus{ outline:none; }

/* -- شريط التمرير -- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink-900); }
::-webkit-scrollbar-thumb{ background:var(--ink-600); border-radius:10px; }

/* -- خريطة بقع الحبر (Heatmap) -- التوقيع البصري للمنصة -- */
.ink-heatmap{
  display:grid;
  grid-template-columns:repeat(auto-fill, 13px);
  gap:4px;
  direction:ltr;
}
.ink-heatmap__cell{
  width:13px; height:13px; border-radius:3px;
  background:var(--ink-600);
  transition:transform .15s ease;
}
.ink-heatmap__cell[data-level="1"]{ background:rgba(200,155,60,.28); }
.ink-heatmap__cell[data-level="2"]{ background:rgba(200,155,60,.52); }
.ink-heatmap__cell[data-level="3"]{ background:rgba(200,155,60,.76); }
.ink-heatmap__cell[data-level="4"]{ background:var(--gold); box-shadow:0 0 6px rgba(200,155,60,.6); }
.ink-heatmap__cell:hover{ transform:scale(1.4); }

/* -- خط فاصل مزخرف -- */
.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--ink-600) 20%, var(--ink-600) 80%, transparent);
  margin:40px 0;
  border:0;
}

@media (max-width:720px){
  .section{ padding:36px 0; }
}