/* ==========================================================================
   TechneTools — Quiet Force
   tokens.css — المصدر الوحيد لكل قيمة تصميمية في الموقع
   أي لون أو حجم أو مسافة في أي ملف تاني لازم ييجي من هنا.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- الألوان ----------
     الموقع عالم داكن واحد بالتصميم — مفيش نسخة فاتحة. */
  --ink:        #08090b;  /* أرضية الصفحة */
  --panel:      #101216;  /* الكروت والأسطح المرتفعة */
  --panel-2:    #171a20;  /* المستوى التاني — الكبسولات والدرج */
  --panel-3:    #1f232b;  /* حالات hover على الأسطح */

  --sand:       #c9b892;  /* الأكسنت الوحيد — أقل من 10% من الصفحة */
  --sand-bright:#e0d2ad;  /* hover على الأكسنت */
  --sand-dim:   #8d7f5f;  /* اللايبلات التقنية */

  --chalk:      #f1ece1;  /* النص الأساسي */
  --ash:        #9aa0a8;  /* النص الثانوي */
  --ash-dim:    #6a7079;  /* النص المساعد والـ placeholder */

  --rule:       rgba(201, 184, 146, .22); /* خط فاصل بالأكسنت */
  --rule-faint: rgba(255, 255, 255, .07); /* خط فاصل محايد */
  --rule-solid: #232830;                  /* حد الحقول والكروت */

  /* حالات — منفصلة عن الأكسنت */
  --ok:    #7fb886;
  --warn:  #d9a85c;
  --error: #d97f7f;

  /* ---------- الخطوط ----------
     IBM Plex Sans Arabic فيه عربي ولاتيني متطابقين، فالموقع عيلة واحدة في اللغتين.
     Anton للعناوين اللاتينية الضخمة بس — ملهوش حروف عربية. */
  --font-ar:      'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;

  /* مقياس الأحجام — clamp عشان يتمدد مع الشاشة من غير media queries */
  --fs-display: clamp(2.75rem, 9vw,   7rem);     /* Anton — لاتيني فقط */
  --fs-h1:      clamp(1.75rem, 4.6vw, 2.75rem);
  --fs-h2:      clamp(1.35rem, 3vw,   1.75rem);
  --fs-h3:      clamp(1.1rem,  2.2vw, 1.3rem);
  --fs-h4:      1rem;
  --fs-body:    0.9375rem;  /* 15px */
  --fs-small:   0.8125rem;  /* 13px */
  --fs-label:   0.6875rem;  /* 11px — مونو فقط */

  --lh-tight:  1.15;
  --lh-head:   1.35;
  --lh-body:   1.85;

  --ls-label: .16em;  /* تباعد اللايبلات اللاتينية */
  --ls-mono:  .1em;

  /* ---------- المسافات — أساس 4px ---------- */
  --sp-1:  .25rem;  --sp-2:  .5rem;   --sp-3:  .75rem;  --sp-4: 1rem;
  --sp-5:  1.25rem; --sp-6:  1.5rem;  --sp-8:  2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  --sec-pad: clamp(3.5rem, 8vw, 6rem);  /* مسافة رأسية بين الأقسام */
  --gutter:  clamp(1.25rem, 4vw, 2rem); /* هامش جانبي — مينفعش يقل عن 20px */
  --maxw:    1160px;

  /* ---------- الشكل ----------
     قاعدة الاتجاه: المحتوى زواياه قائمة، اللي بيتنقر مدوّر. */
  --r-hard: 0;       /* كروت ومحتوى */
  --r-soft: .625rem; /* حقول ودرج */
  --r-pill: 999px;   /* أزرار وكبسولات تنقّل */

  --bw: 1px;         /* سمك الحد الافتراضي */

  /* ---------- الظلال — للعناصر الناعمة بس ---------- */
  --sh-soft:    0 10px 22px rgba(0, 0, 0, .5),  inset 0 1.5px 0 rgba(255, 255, 255, .5);
  --sh-soft-lg: 0 16px 30px rgba(0, 0, 0, .6),  inset 0 1.5px 0 rgba(255, 255, 255, .6);
  --sh-panel:   0 14px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  --sh-drawer:  0 24px 60px rgba(0, 0, 0, .7);

  /* ---------- الحركة ---------- */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --t-fast: .16s var(--ease);
  --t-base: .28s var(--ease);

  /* ---------- الطبقات ---------- */
  --z-header:  100;
  --z-drawer:  200;
}

/* الحركة بتتلغي لمن طالب تقليلها */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t-base: .01ms; }
}