/* =================================================================================================
   FILE: variables.css
   PURPOSE: CSS design tokens — all :root variables for the entire landing page.
   Extracted from base.css (Phase 9 — Full Landing Page Self-Ownership).

   Load order: FIRST — before base.css and all section CSS files.
   Referenced by: base.css, navbar.css, hero.css, features.css, about.css,
                  contact.css, auth_shared.css, otp.css, animations.css, mobile.css
================================================================================================= */

:root {

  /* الموقع داكن التصميم بشكل دائم بلا وضع فاتح — يخبر المتصفح بذلك حتى
     يستخدم شريط تمرير/عناصر تحكم أصلية داكنة بدل الافتراضي الفاتح
     (يمنع "وميض" أبيض للعناصر الأصلية قبل تحميل تصاميم الأقسام) */
  color-scheme: dark;

  /* ---------------------------------------------------------------------------------------------
     BACKGROUND COLORS — ألوان الخلفيات
  --------------------------------------------------------------------------------------------- */

  /* اللون الأغمق المستخدم في نهاية التدرجات */
  --bg-1: #02060d;

  /* لون الخلفية المتوسط */
  --bg-2: #07131f;

  /* لون الخلفية العلوي */
  --bg-3: #0a2230;


  /* ---------------------------------------------------------------------------------------------
     BRAND COLORS — ألوان الهوية البصرية
  --------------------------------------------------------------------------------------------- */

  /* اللون السماوي الرئيسي */
  --cyan: #35d9ff;

  /* اللون السماوي المتوهج */
  --cyan-2: #00fff0;

  /* اللون الذهبي للعناصر المهمة */
  --gold: #f5c451;


  /* ---------------------------------------------------------------------------------------------
     TEXT COLORS — ألوان النصوص
  --------------------------------------------------------------------------------------------- */

  /* لون نص خافت للوصف والمحتوى الثانوي */
  --text-soft: rgba(255, 255, 255, 0.72);


  /* ---------------------------------------------------------------------------------------------
     BORDER COLORS — ألوان الحدود
  --------------------------------------------------------------------------------------------- */

  /* حدود شفافة أنيقة للكروت والصناديق */
  --border: rgba(255, 255, 255, 0.09);
}

/* ==============================================
   تبديل اللغة — يتحكم HTML في المحتوى ثنائي اللغة
   setLanguage() في shared.js يعيّن html.lang — CSS يكمل التبديل
   أي نص يريد المستخدم تعديله يجب أن يكون داخل ملف HTML الخاص بالقسم فقط
=============================================== */
html[lang="ar"] .lang-en { display: none; }
html:not([lang="ar"]) .lang-ar { display: none; }

/* تبديل محتوى تبويب نافذة المصادقة — يُتحكّم فيه من switchAuthTab() في login.js */
.tab-hidden { display: none !important; }