/**
 * @file css/variables.css
 * @description نظام المتغيرات المعمارية الدقيقة لاستوديو إيوان (IWAN Atelier)
 * يشمل لوحة الألوان المحايدة، نغمات التمييز العضوي، نسب الفراغ والمنظور ثلاثي الأبعاد، وأنسجة الحبيبات.
 */

:root {
  /* --------------------------------------------------------------------------
     1. لوحة الألوان المحايدة (85% من مساحة الواجهة - درجات طبيعية دافئة)
     -------------------------------------------------------------------------- */
  --bg-primary: #F2F0EB;          /* أبيض سحابي دافئ وعتيق كالحجر الجيري */
  --bg-secondary: #E8E4DC;        /* ضباب معدني خفيف كالترافرتين المعالج */
  --bg-dark: #1A1815;             /* فحمي دافئ محروق - ليس أسود صناعيًا صريحًا */
  --bg-dark-elevated: #26231F;    /* درجة مرتفعة للأرضيات الداكنة المعمارية */
  --bg-card: rgba(242, 240, 235, 0.75); /* أرضية شفافة للكروت المنسوجة */
  
  --text-primary: #1A1815;        /* نص رئيسي فحمي داكن عالي التباين */
  --text-secondary: #6B6560;      /* نص ثانوي هادئ ومريح للقراءة المعمارية */
  --text-muted: #A39D96;          /* تفاصيل خافتة وتواريخ غير ملحة */
  --text-inverse: #F2F0EB;        /* نصوص متباينة للخلفيات الداكنة */
  --text-inverse-muted: #C0BAB2;  /* نصوص ثانوية هادئة للخلفيات الداكنة */
  
  --border: rgba(26, 24, 21, 0.08);       /* حدود شعرية خفيفة للغاية */
  --border-strong: rgba(26, 24, 21, 0.16);/* فواصل معمارية أكثر حضورًا */
  --border-inverse: rgba(242, 240, 235, 0.12); /* حدود ناعمة على المساحات الداكنة */

  /* --------------------------------------------------------------------------
     2. ألوان التمييز (أقل من 15% من السطح البصري)
     -------------------------------------------------------------------------- */
  --accent-primary: #2D5A4E;       /* أزرق مخضر عميق مستوحى من أوراق الزيتون الرخامية */
  --accent-primary-light: #3D7A68; /* درجة أفتح للإضاءات الجانبية */
  --accent-primary-dark: #1E3D35;  /* درجة غائرة للمساحات المظللة */
  
  --accent-warm: #C4894A;          /* أوكر دافئ ولون النحاس المؤكسد للتفاعلات الحيوية */
  --accent-warm-hover: #D69755;    /* حالة التحويم فوق الأزرار والمؤشرات */
  --accent-warm-rgb: 196, 137, 74; /* قيمة ثلاثية لتراكبات الشفافية المخصصة */

  /* --------------------------------------------------------------------------
     3. نظام الحسابات الفضائية وثلاثية الأبعاد (3D Spatial Geometry)
     -------------------------------------------------------------------------- */
  --perspective: 1200px;           /* عمق المنظور الرئيسي للمشاهد الحركية */
  --perspective-origin: 50% 50%;   /* نقطة التلاشي المركزية للعين المعمارية */
  
  /* متغيرات السكرول الديناميكية - يتم تحديثها بواسطة JS وتُقرأ مباشرة في CSS */
  --hero-scroll: 0;                /* قيمة تدريجية من 0 إلى 1 لغرفة المدخل */
  --scroll-progress: 0;            /* النسبة المئوية العامة لسكرول الصفحة */
  --scroll-y: 0px;                 /* إزاحة البكسل اللحظية لحركات البارالاكس */
  --mouse-x: 0;                    /* إمالة الماوس الأفقية للأسطح ثلاثية الأبعاد */
  --mouse-y: 0;                    /* إمالة الماوس الرأسية للأسطح ثلاثية الأبعاد */

  /* --------------------------------------------------------------------------
     4. المقاييس الهندسية وتوزيع الكتل (Layout Dimensions)
     -------------------------------------------------------------------------- */
  --container-max: 1360px;         /* الحد الأقصى للمحتوى التحريري الواسع */
  --container-narrow: 1040px;      /* عرض مريح لنصوص المقالات ودراسات الحالة */
  --gutter-desktop: 48px;          /* هوامش الشاشات الكبيرة */
  --gutter-mobile: 20px;           /* هوامش شاشات الهواتف النقالة */
  --nav-height: 80px;              /* ارتفاع الشريط العلوي الملتصق */

  /* --------------------------------------------------------------------------
     5. منحنيات الحركة وتوقيتات التفاعل (Physics & Easing Transitions)
     -------------------------------------------------------------------------- */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1); /* منحنى ارتداد معماري ناعم وغير آلي */
  --ease-subtle: cubic-bezier(0.25, 0.1, 0.25, 1);  /* للحركات المادية البسيطة */
  --duration-hover: 260ms;         /* استجابة سريعة للنقر والتحويم */
  --duration-reveal: 950ms;        /* كشف بطيء ومهيب للكتل المعمارية */
  --duration-theme: 800ms;         /* انتقال سلس بين حالات الثيم بالصفحة */

  /* --------------------------------------------------------------------------
     6. نسيج السطح وضوضاء الخامة (Tactile SVG Grain Texture)
     -------------------------------------------------------------------------- */
  --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
  
  /* نمط شبكي معمارى خافت للجدران والخلفيات */
  --grid-pattern: radial-gradient(circle, rgba(26, 24, 21, 0.06) 1px, transparent 1px);
  --grid-size: 32px 32px;
}

/* سمات الثيم الداكن للأقسام الخاصة (مثل الغرفة ثلاثية الأبعاد وقسم الشهادات الداكن) */
[data-theme="dark"] {
  --bg-primary: #1A1815;
  --bg-secondary: #221F1B;
  --bg-dark: #0F0E0C;
  --bg-card: rgba(34, 31, 27, 0.85);
  
  --text-primary: #F2F0EB;
  --text-secondary: #C0BAB2;
  --text-muted: #7A746D;
  --text-inverse: #1A1815;
  
  --border: rgba(242, 240, 235, 0.08);
  --border-strong: rgba(242, 240, 235, 0.16);
  --grid-pattern: radial-gradient(circle, rgba(242, 240, 235, 0.05) 1px, transparent 1px);
}