/* ══════════════════════════════════════════════════════════════
   TOPA TRADERS — Design Tokens
   المصدر الوحيد للألوان والخطوط والأحجام والمسافات.
   يُستخدم في الصفحة الرئيسية وكل Landing Page قادمة.
   ══════════════════════════════════════════════════════════════ */

/* الخط — ملفات محلية داخل أصول القالب، بلا أي اعتماد على شبكة خارجية */
@font-face{
  font-family:'Alexandria';font-style:normal;font-weight:400 700;font-display:swap;
  src:url({{ "alexandria-arabic.woff2" | asset_url }}) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,
    U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,
    U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF;
}
@font-face{
  font-family:'Alexandria';font-style:normal;font-weight:400 700;font-display:swap;
  src:url({{ "alexandria-latin.woff2" | asset_url }}) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.topa{
  /* ── الألوان: أسود محايد + أخضر TOPA ── */
  --bg:#000;
  --s1:#070707;          /* سطح بديل للأقسام */
  --s2:#0C0C0C;          /* سطح البطاقات */
  --s3:#121212;          /* سطح مرتفع */
  --gl:rgba(255,255,255,.035);   /* زجاج - الطرف الشفاف */
  --gl2:rgba(255,255,255,.055);  /* زجاج - الطرف المضيء */
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.15);
  --line3:rgba(255,255,255,.24);

  --g:#06CE2A;           /* الأخضر الأساسي */
  --g-lt:#2BE84D;        /* أخضر التفاعل */
  --g-dk:#04991F;
  --g08:rgba(6,206,42,.08);
  --g12:rgba(6,206,42,.12);
  --g20:rgba(6,206,42,.2);
  --g30:rgba(6,206,42,.3);
  --g45:rgba(6,206,42,.45);

  --gold:#E8B93C;        /* العناصر المالية ثلاثية الأبعاد فقط */

  /* الأزرق — يُفعّل داخل قسم START TOPA حصراً عبر .topa-blue */
  --b:#2E7DF7; --b-lt:#5B9BFF;
  --b08:rgba(46,125,247,.08); --b12:rgba(46,125,247,.12);
  --b20:rgba(46,125,247,.2);  --b30:rgba(46,125,247,.3); --b45:rgba(46,125,247,.45);

  /* ── النصوص ── */
  --tx:#F4F4F4; --tx2:#A2A2A2; --tx3:#707070; --w:#fff;

  /* ── الطباعة ── */
  --font:"Alexandria","Tajawal",Arial,"Segoe UI",Tahoma,sans-serif;
  --h1:clamp(35px,5.2vw,52px);      /* 35 موبايل → 52 ديسكتوب */
  --h2:clamp(28px,4vw,38px);        /* 28 موبايل → 38 ديسكتوب */
  --h3:clamp(17px,1.6vw,19px);
  --sub:clamp(15px,1.55vw,17px);    /* 15 موبايل → 17 ديسكتوب */
  --body:clamp(14px,1.35vw,15.5px);
  --small:13px;
  --lh-h:1.4;  --lh-b:1.9;

  /* ── المقاسات والمسافات ── */
  --max:1200px;
  --measure:600px;                  /* أقصى عرض لفقرة نصية */
  --pad:clamp(20px,4vw,32px);
  --sp:clamp(60px,7vw,90px);        /* 60 موبايل → 90 ديسكتوب */
  --gap:clamp(13px,1.5vw,18px);
  --btn-h:48px;                     /* 46 على الموبايل */
  --hero-h:clamp(0px,68vw,650px);   /* 620–680 ديسكتوب، Auto على الموبايل */

  /* ── الأشكال ── */
  --r:10px; --r-lg:16px;
  --shadow:0 16px 40px -20px rgba(0,0,0,.9);

  /* ── الحركة ── */
  --ez:cubic-bezier(.22,1,.36,1);
  --dur:620ms;                      /* ضمن 500–750ms */
  --shift:20px;                     /* ضمن 16–24px */
}

/* نقاط الكسر المعتمدة:
   ≤400  هاتف صغير
   ≤680  هاتف
   ≤900  تابلت / تبديل القائمة
   ≤1080 تابلت عريض
   >1080 ديسكتوب                        */