/* الأساس: reset بسيط + طباعة عربية + أزرار + روابط */

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

html {
  /* مكان شريط التمرير محجوز من أول رسم: بدونه الشريط يظهر بعد الرسم الأول فتنزاح الصفحة العربية (المحاذاة لليمين)
     15px لليسار (CLS 0.011 بقياس Lighthouse للكمبيوتر). على الجوال الشريط عائم فما يأثر */
  scrollbar-gutter: stable;
  /* عند التنقل بـ Tab يتمرر العنصر فوق حافة الشاشة السفلية بمسافة تكفي للزر العائم (56px + 16-32px)،
     فلا يتغطى التركيز (WCAG 2.4.11) ولا يُقص إطاره */
  scroll-padding-block-end: 6rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* العربي ما ينحمل تباعد أحرف: أي letter-spacing يقطع الوصل بين الحروف */
:lang(ar) { letter-spacing: 0; }

/* اللغة تحدد الخط وارتفاع السطر، على العناصر اللي بيها [lang] فقط (مو كل الأبناء).
   المتغيرات بوزن [lang] حتى تغلب :root بـ tokens.css على <html>،
   والخط وارتفاع السطر بوزن صفر حتى تبقى قواعد العناوين والـ .display هي الغالبة. */
[lang|="en"] {
  --font-body: var(--font-latin), var(--font-ar);
  --leading-body: 1.6;
  --leading-heading: 1.2;
  --leading-display: 1.1;
  --measure: 50ch;               /* ≈ 65 حرفاً فعلياً (مقيس بالمتصفح): الحرف أضيق من "0" */
}
[lang|="ar"] {
  --font-body: var(--font-ar), var(--font-latin);
  --leading-body: 1.9;
  --leading-heading: 1.45;
  --leading-display: 1.3;
  --measure: 49ch;               /* ≈ 65 حرفاً فعلياً بالعربي (مقيس بالمتصفح) */
}
:where([lang]) {
  font-family: var(--font-body);
  line-height: var(--leading-body);
}
.latin { font-family: var(--font-latin); }

img, svg, video { display: block; max-inline-size: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
/* طول السطر: حد أقصى حوالي 65 حرفاً باللغتين */
p, li, dd {
  text-wrap: pretty;
  max-inline-size: var(--measure);
}

/* العناوين */
h1, h2, h3, h4 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

.display {
  font-size: var(--step-5);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  text-wrap: balance;            /* ما تبقى كلمة وحيدة بسطر */
}
.lead {
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
  color: var(--color-ink);       /* وزن 300 يحتاج أعلى تباين: حبر، مو نص ثانوي */
}
.muted { color: var(--color-muted); }
.prose { max-inline-size: var(--measure); }

/* أرقام الخطوات الكبيرة: لاتينية بدون صفر بادئ، Readex Pro 600 باللغتين، آجر، 48px فما فوق */
.step-num {
  font-family: var(--font-ar);
  font-size: var(--size-step-number);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: lining-nums tabular-nums;
}

/* أرقام مركّبة داخل النص العربي (هاتف، تاريخ، مقاس) بخط النص نفسه:
   تُعزل باتجاه LTR حتى ما ينقلب ترتيبها. الأرقام دائماً لاتينية 0-9. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;           /* الرقم ما ينقسم على سطرين */
}

/* كلمة ورقمها ما ينفصلان على سطرين (مثل: الإصدار v1.0.0) */
.nowrap { white-space: nowrap; }

/* بيانات حقيقية فقط (مواصفات، إصدار، رقم) */
.data {
  font-family: var(--font-mono);
  font-size: 0.92em;
  direction: ltr;
  unicode-bidi: isolate;
}

/* الروابط */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
@media (hover: hover) {
  a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
}

/* focus ظاهر لكل عنصر تفاعلي */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* رابط التخطي */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: var(--space-4);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;          /* هدف لمس 44px (كان 42 بالإنجليزي) */
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink);
  color: var(--color-ivory);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
/* الرابط يظهر فوق الهيدر الداكن: إطار عاجي (الأخضر على الحبر 1.85:1 ضعيف) */
.skip-link:focus-visible { outline-color: var(--color-ivory); }

/* بعد الـ Intro التركيز ينتقل لـ <main tabindex="-1"> برمجياً: بدون إطار على main فقط */
main[tabindex="-1"]:focus { outline: none; }

/* أيقونات اتجاهية (أسهم): تُرسم باتجاه LTR وتنعكس بالعربي */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}
.icon--dir:dir(rtl) { transform: scaleX(-1); }

/* زر تبديل اللغة بالهيدر (الهيدر نفسه بـ css/sections.css) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-4);
  border: var(--border-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-weight: var(--weight-bold);
  font-size: var(--step--1);
  text-decoration: none;
}
@media (hover: hover) {
  .lang-switch:hover { border-color: var(--color-primary); color: var(--color-primary); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* الأزرار */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn:focus-visible { outline-offset: 3px; }

/* رئيسي: أخضر */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-ivory);
}
/* ثانوي: حد حبر بدون تعبئة */
.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
/* رئيسي على الأقسام الداكنة: عاجي بنص حبر */
.btn--ivory {
  background: var(--color-ivory);
  color: var(--color-ink);
}
/* ثانوي على الأقسام الداكنة */
.btn--ghost-dark {
  background: transparent;
  color: var(--color-ivory);
  border-color: var(--color-dark-muted);
}

@media (hover: hover) {
  .btn--primary:hover    { background: var(--color-primary-hover); color: var(--color-ivory); }
  .btn--secondary:hover  { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-primary); }
  .btn--ivory:hover      { background: var(--color-dark-hover); color: var(--color-ink); }
  .btn--ghost-dark:hover { border-color: var(--color-ivory); color: var(--color-ivory); }
}

/* الحالة المعطّلة: وضوح أقل بدون الاعتماد على اللون وحده (المؤشر + الحد المتقطع) */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-border-subtle);
  color: var(--color-muted);
  border-color: var(--color-border);
  border-style: dashed;
  cursor: not-allowed;
}
.section--dark .btn:disabled,
.section--dark .btn[aria-disabled="true"] {
  background: transparent;
  color: var(--color-dark-muted);
  border-color: var(--color-dark-border);
}

/* الأقسام الداكنة (الواجهة + الأجهزة + الفوتر فقط) */
.section--dark {
  --focus-color: var(--focus-color-dark);
  /* أي مكوّن يستعمل --color-accent داخل قسم داكن يأخذ الآجر الفاتح تلقائياً */
  --color-accent: var(--color-accent-on-dark);
  --border-accent: 2px solid var(--color-accent-on-dark);
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
}
.section--dark .muted { color: var(--color-dark-muted); }
.section--dark .lead { color: var(--color-dark-text); }
.section--dark a:not(.btn) { color: var(--color-ivory); }

/* حاوية عامة */
.container {
  width: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}