@charset "UTF-8";
/* ==========================================================================
   مدارس نجوم الإبداع الأهلية — ملف الثيم (الألوان والخطوط والمقاييس)
   --------------------------------------------------------------------------
   هذا الملف يُحمّل بعد design-system.css ويتجاوز قيمه.

   عدّل هنا فقط عندما تريد تغيير:
     • الألوان
     • الخطوط
     • حجم الاستدارة
     • المسافات بين الأقسام
     • سرعة الحركات

   لا تعدّل design-system.css ولا landing.css لتغيير لون أو خط.
   ========================================================================== */

:root {

  /* ══════════════════════════════════════════
     الهوية اللونية — مستخرجة من إعلان التسجيل
     ══════════════════════════════════════════ */

  /* لون الهوية الأساسي — الخشب الداكن (الأزرار والعناوين)
     يُشتق من --wood-600 في الأسفل، فعدّله هناك أو اكتب لونًا صريحًا هنا */
  --brand: var(--wood-600);

  /* لون النداء الثانوي — النحاسي (الأيقونات والروابط والتمييز)
     يُشتق من --copper في الأسفل */
  --accent: var(--copper);

  /* خلفية الصفحة العامة — رملي فاتح */
  --bg: #F7F1E8;

  /* لون النص الأساسي */
  --text: #3B2418;


  /* ── لتغيير الطابع اللوني بالكامل، عدّل السلالم التالية ──
     كل سلّم من الأفتح (100) إلى الأغمق (700/900)               */

  /* سلّم الطين والرمل — الخلفيات والحدود */
  --clay-50:  #FDFAF5;
  --clay-100: #F7F1E8;
  --clay-200: #EFE3D2;
  --clay-300: #E4D0B6;
  --clay-400: #D6B48C;
  --clay-500: #C89A6B;
  --clay-600: #B07A4A;
  --clay-700: #925E36;

  /* سلّم الخشب — الأشرطة الداكنة والنصوص */
  --wood-400: #7C5138;
  --wood-500: #6B4229;
  --wood-600: #5C3324;
  --wood-700: #4A2B1E;
  --wood-800: #3B2418;
  --wood-900: #2A180F;

  /* النحاسي والذهبي والكريمي — التمييز والنصوص على الداكن */
  --copper:       #B07A4A;
  --copper-light: #C88F5F;
  --gold:         #E9C9AA;
  --cream:        #F2E4D2;


  /* ══════════════════════════════════════════
     الخطوط
     ------------------------------------------
     لتبديل الخط: ضع ملف woff2 في assets/fonts
     ثم عدّل قاعدة @font-face في design-system.css
     وحدّث الاسم هنا.
     ══════════════════════════════════════════ */
  --font-head: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'Plex Arabic', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;

  /* أحجام النصوص — القيم تتكيّف تلقائيًا مع عرض الشاشة */
  --fs-display: clamp(1.9rem, 6.6vw, 3.4rem);   /* عنوان القسم الرئيسي */
  --fs-h2:      clamp(1.45rem, 4.8vw, 2.15rem); /* عناوين الأقسام */
  --fs-h3:      clamp(1.12rem, 3.4vw, 1.35rem); /* عناوين البطاقات */
  --fs-lead:    clamp(1rem, 3.3vw, 1.19rem);    /* النص التمهيدي */

  /* ارتفاع السطر — العربية تحتاج مساحة أوسع من اللاتينية */
  --lh-body: 1.85;


  /* ══════════════════════════════════════════
     الشكل العام
     ══════════════════════════════════════════ */

  /* الاستدارة — قلّلها لطابع أكثر رسمية، وزِدها لطابع أكثر ودًّا */
  --r-sm:   10px;   /* الحقول */
  --r:      14px;   /* الأزرار */
  --r-lg:   20px;   /* البطاقات */
  --r-xl:   28px;   /* بطاقة النموذج */

  /* المسافة الرأسية بين الأقسام */
  --section-y: clamp(2.75rem, 7vw, 5.5rem);

  /* الهامش الجانبي */
  --gutter: clamp(1rem, 4vw, 2rem);

  /* أقصى عرض للمحتوى */
  --container: 1140px;


  /* ══════════════════════════════════════════
     الحركة
     ------------------------------------------
     لتقليل الحركة عمومًا: ارفع القيم إلى 0ms
     (حركات النظام تُعطّل تلقائيًا عند تفعيل
      prefers-reduced-motion في جهاز الزائر)
     ══════════════════════════════════════════ */
  --t-fast: 140ms;
  --t:      240ms;
  --t-slow: 380ms;
}


/* ==========================================================================
   أمثلة جاهزة — أزل التعليق عن الكتلة التي تريد تجربتها
   ========================================================================== */

/* ── طابع أفتح وأهدأ ──────────────────────────
:root {
  --bg: #FBF7F1;
  --brand: #6B4229;
  --accent: #C08A5A;
  --r-lg: 24px;
}
*/

/* ── طابع أغمق وأكثر فخامة ────────────────────
:root {
  --bg: #F2E9DC;
  --brand: #4A2B1E;
  --accent: #9A6534;
  --r-lg: 14px;
  --r: 10px;
}
*/

/* ── تعطيل حركات الظهور عند التمرير ───────────
[data-reveal], [data-reveal-group] > * {
  opacity: 1 !important;
  transform: none !important;
}
*/