/* ===========================================================================
   tokens.css — نظام التصميم (المتغيّرات والثيمات)
   Design tokens: colors, type, spacing, radius, shadows, motion.
   عدّل القيم هنا لتغيير هوية الموقع بالكامل من مكان واحد.
   ========================================================================= */

:root {
  /* ---- الخطوط — Typography (الافتراضي: العربية) ---- */
  --font-body: "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "Space Grotesk", ui-monospace, "Cascadia Code", monospace;

  /* مقياس حجم الخط (سيّال responsive عبر clamp) */
  --fs-300: clamp(.8rem, .78rem + .1vw, .875rem);
  --fs-400: clamp(.95rem, .92rem + .15vw, 1.02rem);
  --fs-500: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --fs-600: clamp(1.25rem, 1.15rem + .5vw, 1.6rem);
  --fs-700: clamp(1.6rem, 1.4rem + 1vw, 2.3rem);
  --fs-800: clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
  --fs-900: clamp(2.7rem, 2rem + 3.4vw, 4.7rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  /* ---- المسافات — Spacing scale ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* ---- الزوايا — Radii ---- */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 999px;

  /* ---- الحاوية — Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 72px;

  /* ---- الحركة — Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t-med: .32s;
  --t-slow: .6s;

  /* ---- الطبقات — z-index ---- */
  --z-header: 100;
  --z-menu: 200;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* الخطوط للإنجليزية (LTR) */
html[lang="en"] {
  --font-body: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
}

/* ===========================================================================
   الثيم الداكن — Dark theme (الافتراضي)
   ========================================================================= */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* خلفيات */
  --bg: #070A12;
  --bg-2: #0B1020;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --surface-solid: #111829;
  --glass: rgba(13, 19, 33, .72);

  /* نصوص */
  --text: #E9EEF8;
  --text-strong: #FFFFFF;
  --muted: #93A1B8;
  --faint: #8190A8; /* مرفوع لتجاوز تباين WCAG AA على الخلفيات الداكنة */

  /* حدود */
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);

  /* الهوية — Brand */
  --brand: #19E59B;          /* أخضر نعناعي — نمو/مبيعات */
  --brand-ink: #04150E;
  --brand-2: #2DD4BF;        /* سماوي */
  --violet: #8B7BFF;         /* بنفسجي — تقنية/ابتكار */
  --gold: #F5C463;           /* ذهبي — تمييز الأسعار */
  --danger: #FF6B6B;
  --success: #19E59B;

  /* تدرّجات */
  --grad-brand: linear-gradient(135deg, #19E59B 0%, #2DD4BF 100%);
  --grad-violet: linear-gradient(135deg, #8B7BFF 0%, #2DD4BF 100%);
  --grad-text: linear-gradient(120deg, #FFFFFF 0%, #B9F6DD 55%, #8B7BFF 100%);
  --aurora-1: rgba(25, 229, 155, .26);
  --aurora-2: rgba(139, 123, 255, .22);
  --aurora-3: rgba(45, 212, 191, .18);

  /* ظلال */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --glow-brand: 0 0 0 1px rgba(25, 229, 155, .25), 0 18px 50px rgba(25, 229, 155, .14);
}

/* ===========================================================================
   الثيم الفاتح — Light theme
   ========================================================================= */
[data-theme="light"] {
  color-scheme: light;

  --bg: #F6F8FC;
  --bg-2: #FFFFFF;
  --surface: rgba(8, 20, 40, .025);
  --surface-2: rgba(8, 20, 40, .05);
  --surface-solid: #FFFFFF;
  --glass: rgba(255, 255, 255, .78);

  --text: #16203A;
  --text-strong: #0A1326;
  --muted: #55617A;
  --faint: #5B6781; /* مرفوع ليحقق تباين WCAG AA على الخلفية الفاتحة */

  --line: rgba(10, 22, 44, .1);
  --line-strong: rgba(10, 22, 44, .18);

  /* أخضر داكن للنصوص/الروابط ليحقق تباين AA (4.5:1) على الخلفية الفاتحة.
     التدرّج (grad-brand) يبقى نعناعيًا للأزرار مع حبر داكن (brand-ink). */
  --brand: #0A6B47;
  --brand-ink: #04231A;
  --brand-2: #0EA5A5;
  --violet: #6D5CE0;
  --gold: #C9912B;

  --grad-text: linear-gradient(120deg, #0A1326 0%, #06B981 60%, #6D5CE0 100%);
  --aurora-1: rgba(6, 185, 129, .14);
  --aurora-2: rgba(109, 92, 224, .12);
  --aurora-3: rgba(14, 165, 165, .1);

  --shadow-sm: 0 2px 8px rgba(20, 40, 80, .08);
  --shadow-md: 0 16px 40px rgba(20, 40, 80, .12);
  --shadow-lg: 0 30px 70px rgba(20, 40, 80, .16);
  --glow-brand: 0 0 0 1px rgba(6, 185, 129, .25), 0 18px 50px rgba(6, 185, 129, .14);
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .001s; --t-med: .001s; --t-slow: .001s; }
}