/* ============================================================
   سبّاق — توكنات الهوية
   مستخرجة من: Sabbaq Identity ©2025 — Romeya Agency
   ============================================================ */

@font-face {
  font-family: 'Expo Arabic';
  src: url('fonts/ExpoArabic-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Expo Arabic';
  src: url('fonts/ExpoArabic-Book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Expo Arabic';
  src: url('fonts/ExpoArabic-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Expo Arabic';
  src: url('fonts/ExpoArabic-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Expo Arabic';
  src: url('fonts/ExpoArabic-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- ألوان الهوية الرسمية (دليل الهوية) ---- */
  --green:  #b1c134;
  --orange: #ff4e2a;
  --sky:    #7ccbdb;
  --yellow: #ffb900;
  --grey:   #686868;

  /* ---- مشتقات للواجهة ----
     البرتقالي الرسمي #ff4e2a يعطي 3.29:1 مع الأبيض ويرسب في WCAG AA.
     لذلك أسطح الأزرار تستخدم --orange-ink (4.6:1) والبرتقالي الرسمي
     يبقى للرسوم والحدود والعناوين الكبيرة. لا تُرجعه إلى #ff4e2a. */
  --orange-ink:   #d93a18;
  --orange-deep:  #b52f11;
  --orange-tint:  #fff0ec;
  --sky-tint:     #eaf6fa;
  --sky-tint-2:   #d5ecf3;
  --green-tint:   #f3f6e2;
  --green-ink:    #66741a;
  --yellow-tint:  #fff6e0;
  --yellow-ink:   #8a6400;

  /* ---- أسطح ونصوص ---- */
  --bg:        #eaf6fa;
  --surface:   #ffffff;
  --surface-2: #f7fafb;
  --ink:       #2f3436;
  --ink-2:     #5c6467;
  --ink-3:     #8b9295;
  --line:      #dbe6ea;
  --line-2:    #c3d6dd;

  /* ---- الحالات ---- */
  --ok:      #4b8b2f;
  --ok-tint: #eef7e9;
  --warn:      #b06a00;
  --warn-tint: #fff6e0;
  --bad:      #c1301a;
  --bad-tint: #fdeeeb;

  /* ---- الخط ---- */
  --font: 'Expo Arabic', 'Segoe UI', 'Noto Sans Arabic', Tahoma, system-ui, sans-serif;

  --fs-xs:  13px;
  --fs-sm:  15px;
  --fs-md:  17px;   /* الأساس — العربي يقرأ أصغر من اللاتيني */
  --fs-lg:  20px;
  --fs-xl:  25px;
  --fs-2xl: 32px;
  --fs-3xl: clamp(34px, 8vw, 58px);

  --lh-tight: 1.35;
  --lh-body:  1.8;   /* العربي يحتاج أوسع من 1.5 */
  --lh-loose: 2;

  /* ---- المسافات ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- الأشكال ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(31, 62, 72, .06), 0 2px 8px rgba(31, 62, 72, .05);
  --shadow-2: 0 4px 12px rgba(31, 62, 72, .08), 0 12px 32px rgba(31, 62, 72, .08);
  --shadow-3: 0 -4px 20px rgba(31, 62, 72, .1);

  /* ---- الحركة ---- */
  --dur-fast: 120ms;
  --dur:      220ms;
  --ease: cubic-bezier(.32, .72, 0, 1);

  /* ---- المناطق الآمنة ---- */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --maxw: 720px;
  --maxw-wide: 1180px;
}