/* ─────────────────────────────────────────────────────────────
   الباشمبرمج · tokens.css
   نظام التصميم الأساسي. انسخ الملف ده في أي مشروع جديد.
   لكل عميل: غيّر بس المجموعة اللي عليها علامة ✎ — ولا تلمس الباقي.
   القيم الافتراضية هنا هي توكنز futdealer.com الحقيقية.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ══ ✎ ١ · الخط — بدّله لكل عميل ══════════════════════════ */
  --font-ar: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-ar);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ══ ✎ ٢ · أدوار اللون — تسعة، بدّلهم لكل عميل ═══════════ */
  --color-bg:       #ffffff;   /* خلفية الصفحة */
  --color-surface:  #f7f8fa;   /* كروت، لوحات، حقول */
  --color-line:     #e4e7ee;   /* حدود وفواصل */
  --color-ink:      #0b0d12;   /* النص الأساسي */
  --color-muted:    #5b6478;   /* نص ثانوي */
  --color-accent:   #a8791c;   /* لون الهوية (كان gold في FUT Dealer) */
  --color-accent-hi:#e8ce8e;   /* نسخة فاتحة للهايلايت */
  --color-ok:       #15803d;   /* نجاح / ربح */
  --color-danger:   #b91c1c;   /* خطأ / خسارة */

  /* مشتقات — محسوبة تلقائياً، ما تلمسهاش */
  --color-accent-soft: color-mix(in oklab, var(--color-accent) 12%, transparent);
  --color-ink-on-accent: #ffffff;

  /* ══ ✎ ٣ · الشكل — نصف قطر واحد يحكم كل حاجة ═════════════ */
  --radius: .75rem;                          /* 12px — قيمة FUT Dealer */
  --radius-sm: calc(var(--radius) * .5);
  --radius-lg: calc(var(--radius) * 1.6);
  --radius-full: 999px;

  /* ══ ٤ · سلّم الخطوط — متجاوب، ما تحطش مقاسات ثابتة ═══════ */
  --step--1: clamp(.83rem, .80rem + .15vw, .92rem);
  --step-0:  clamp(1rem,   .95rem + .25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.15rem + .50vw, 1.55rem);
  --step-2:  clamp(1.56rem, 1.38rem + .90vw, 2.13rem);
  --step-3:  clamp(1.95rem, 1.65rem + 1.50vw, 2.93rem);
  --step-4:  clamp(2.44rem, 1.95rem + 2.45vw, 4.02rem);
  --step-5:  clamp(3.05rem, 2.28rem + 3.85vw, 5.53rem);

  /* ══ ٥ · المسافات — أساس ٤ بكسل ═══════════════════════════ */
  --space-1:.25rem;  --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem;  --space-6:2rem;   --space-7:3rem;   --space-8:4.5rem;
  --space-9:6.5rem;  --space-10:9rem;

  /* ══ ٦ · الظل والحركة ═════════════════════════════════════ */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .05), 0 0 0 1px rgb(0 0 0 / .04);
  --shadow-2: 0 12px 32px -12px rgb(0 0 0 / .18), 0 0 0 1px rgb(0 0 0 / .05);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms; --dur-2: 260ms; --dur-3: 420ms;

  /* ══ ٧ · القياسات ═════════════════════════════════════════ */
  --measure: 68ch;                            /* أقصى عرض للنص المقروء */
  --page: 76rem;                              /* أقصى عرض للمحتوى */
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
}

/* ── الوضع الداكن ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:      #0b0d12;
    --color-surface: #14171f;
    --color-line:    #232833;
    --color-ink:     #f2f4f8;
    --color-muted:   #8b94a8;
    --color-accent:  #e8ce8e;
    --color-accent-hi:#a8791c;
    --color-ok:      #4ade80;
    --color-danger:  #f87171;
    --color-ink-on-accent: #0b0d12;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .05);
    --shadow-2: 0 12px 32px -12px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .06);
  }
}
:root[data-theme="dark"] {
  --color-bg:#0b0d12; --color-surface:#14171f; --color-line:#232833;
  --color-ink:#f2f4f8; --color-muted:#8b94a8;
  --color-accent:#e8ce8e; --color-accent-hi:#a8791c;
  --color-ok:#4ade80; --color-danger:#f87171; --color-ink-on-accent:#0b0d12;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .05);
  --shadow-2: 0 12px 32px -12px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .06);
}

/* ═══════════════════════════════════════════════════════════
   الطبقة العربية
   دي الجزء اللي مالوش وجود في أي مكتبة مكوّنات.
   من غيرها الموقع العربي بيبان "مترجم" مهما كان تصميمه حلو.
   ═══════════════════════════════════════════════════════════ */
:lang(ar), [dir="rtl"] {
  font-family: var(--font-ar);
  font-size: 1.0625rem;    /* العربي بيقرا أصغر من اللاتيني بنفس المقاس */
  line-height: 1.85;       /* التشكيل والنقط محتاجين مساحة رأسية أكتر */
  letter-spacing: normal;  /* normal مش 0 — التتبّع بيكسر وصل الحروف */
  font-synthesis: none;    /* يفشل بوضوح بدل ما يزوّر وزن الخط */
}

:lang(ar) :is(h1, h2, h3, h4) {
  line-height: 1.35;
  letter-spacing: normal;
}

/* Tailwind بيحط tracking-tight على العناوين — ده مدمّر في العربي */
:lang(ar) [class*="tracking-"] { letter-spacing: normal; }

/* مافيش مايل في العربي. الوزن هو التوكيد. */
:lang(ar) :is(em, i, cite, dfn, address) {
  font-style: normal;
  font-weight: 600;
}

:lang(ar) a {
  text-underline-offset: .25em;
  text-decoration-skip-ink: auto;
}

/* الأرقام في العربي: لاتينية دايماً، ومعزولة عن الاتجاه */
:lang(ar) :is(time, .num, [data-num]) {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  direction: ltr;
}

/* ── ربط الخط: لاتيني أول، والعربي بيقع عليه بالـ unicode-range ──
   استبدل المسارات دي بخطوطك. الترتيب مهم:
   الاسم الواحد بياخد اللاتيني من الملف الأول والعربي من التاني.
@font-face {
  font-family: "AppSans";
  src: url("/fonts/latin.woff2") format("woff2");
  unicode-range: U+0000-024F, U+2000-206F;
  font-display: swap;
}
@font-face {
  font-family: "AppSans";
  src: url("/fonts/arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
  font-display: swap;
}
*/

/* ── قواعد أساسية ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ar);
  -webkit-font-smoothing: antialiased;
}

:is(h1,h2,h3,h4,h5,h6) { margin: 0; text-wrap: balance; }
p { margin: 0; max-width: var(--measure); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}