/* ==========================================================================
   رِواق | RIWAQ — css/variables.css
   المتغيرات المعمارية: نظام الألوان، الطباعة، التوقيت، والحدود التحريرية
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     لوحة الألوان الأساسية (Editorial Warm Palette)
     -------------------------------------------------------------------------- */
  --bg-primary: #F5F1EA;         /* ورق كريمي دافئ - الخلفية العامة */
  --bg-secondary: #EBE5DB;       /* طبقة ثانية أعمق قليلاً للحوارات والبطاقات */
  --bg-accent: #1A1815;          /* فحمي داكن - للأقسام المعزولة حصراً */

  --text-primary: #1A1815;       /* النص الأساسي الفحمي الداكن */
  --text-secondary: #6B655B;     /* النص التوضيحي الثانوي الدافئ */
  --text-muted: #A39A8C;         /* التفاصيل الدقيقة والبيانات الخافتة */
  --text-inverse: #F5F1EA;       /* النص المعكوس على الخلفيات الفحمية */

  /* التمييزات اللونية التحريرية (Accents) */
  --accent-warm: #B8956A;        /* ذهبي ترابي - للتسطيرات والتفاصيل الرفيعة */
  --accent-clay: #A67C5B;        /* طيني هادئ - للتفاعلات والخطوط الفرعية */
  --accent-moss: #5C6B4A;        /* زيتوني نباتي - للمؤشرات والرموز البيانية فقط */

  /* الحدود والشفافيات */
  --border-subtle: rgba(26, 24, 21, 0.08);   /* حدود ورقية ناعمة تفصل المواد */
  --border-strong: rgba(26, 24, 21, 0.18);   /* حدود واضحة للإطارات والخطوط الرئيسية */
  --border-inverse: rgba(245, 241, 234, 0.12); /* حدود فاتحة داخل الأقسام الفحمية */

  /* --------------------------------------------------------------------------
     نظام الطباعة وعائلات الخطوط (Editorial Typography Stack)
     -------------------------------------------------------------------------- */
  --font-heading: "Aref Ruqaa", "Traditional Arabic", serif;
  --font-subheading: "Reem Kufi", -apple-system, sans-serif;
  --font-body: "IBM Plex Sans Arabic", -apple-system, sans-serif;
  --font-numeric: "Cormorant Garamond", Georgia, serif;
  --font-mono: "Space Mono", monospace;

  /* أوزان الخطوط */
  --fw-light: 300;     /* مخصص حصراً للنصوص والترميزات اللاتينية */
  --fw-normal: 400;    /* الأساسي لكافة النصوص والفقرات العربية */
  --fw-medium: 500;    /* العناوين الفرعية المتوازنة */
  --fw-semibold: 600;  /* العناوين التحريرية وأقسام المقالات */
  --fw-bold: 700;      /* العناوين الرئيسية الكبرى */

  /* ارتفاعات السطور المتوافقة مع طبيعة الخط العربي */
  --lh-tight: 1.2;     /* للعناوين العملاقة والأرقام */
  --lh-heading: 1.3;   /* للعناوين الرئيسية والفرعية */
  --lh-subheading: 1.4;/* للمقدمات والفقرات المميزة */
  --lh-body: 1.9;      /* لفقرات القراءة الممتدة المتنفسة */

  /* سلم الأحجام الديناميكي التحريري */
  --fs-hero: clamp(2.5rem, 6.5vw, 5.5rem);
  --fs-page-title: clamp(2rem, 5vw, 4rem);
  --fs-section-title: clamp(1.5rem, 3.5vw, 2.5rem);
  --fs-subsection: clamp(1.125rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  --fs-numeric-hero: clamp(3rem, 7vw, 6rem);
  --fs-numeric-display: clamp(2.5rem, 5vw, 4rem);
  --fs-numeric-stat: clamp(2rem, 3.5vw, 3rem);

  /* --------------------------------------------------------------------------
     نظام القياس والتباعد التحريري المتنفس (Spatial Rhythm)
     -------------------------------------------------------------------------- */
  --space-unit: 8px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 144px;

  --container-max-width: 1360px;
  --container-narrow-width: 980px;
  --container-text-width: 760px;
  --header-height: 72px;

  /* --------------------------------------------------------------------------
     قوانين الانتقال والحركة الصامتة (Compositor Transitions)
     -------------------------------------------------------------------------- */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-hover: 300ms;
  --duration-enter: 800ms;
  --duration-reveal: 1000ms;

  /* فلتر الصور التحريري المعتمد */
  --image-filter: saturate(0.92) contrast(1.05) brightness(0.98);
}

/* --------------------------------------------------------------------------
   سمة التباين الفحمي للأقسام المعزولة فقط (CTA, Footer, Before/After)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  background-color: var(--bg-accent);
  color: var(--text-inverse);
  --text-primary: #F5F1EA;
  --text-secondary: #A39A8C;
  --text-muted: #6B655B;
  --border-subtle: rgba(245, 241, 234, 0.12);
  --border-strong: rgba(245, 241, 234, 0.24);
}