/* Design tokens — مصدرها UI_spec §1 (هوية v2 من offers_style.py).
   ألوان الفئات بـcats.css (مولّد من البيانات) — لا تكتب لون فئة هنا. */
:root {
  /* الألوان الثابتة — ثيم فاتح مطابق للوكو: أبيض وتدرّجات رمادي، والنص أسود */
  --bg: #E9E9E7;
  --bg-deep: #DCDCD9;
  --card: #FFFFFF;
  --card-2: #F7F7F6;
  --line: #D4D4D1;          /* زخرفي فقط */
  --line-strong: #7A7A76;   /* حدود عناصر تفاعلية — تباين ≥3:1 على الخلفية الرمادية */
  --txt: #161616;
  --soft: #3A3A3A;
  --muted: #575754;         /* تباين ≥5.6:1 على الخلفية الرمادية */
  --on-accent: #161616;
  --white: #FFFFFF;
  --glass: rgba(255, 255, 255, .96);
  --glass-soft: rgba(255, 255, 255, .84);
  --c-brand: #E8C9A0;
  --brand-ink: #6E5B43;     /* نسخة غامقة من الرملي للنصوص — تباين ≥4.5:1 */
  --wa: #25D366;            /* نص داكن عليه دايماً (أبيض = 1.9 تباين) */
  --wa-hover: #3BE07A;
  --ok-bg: rgba(37, 211, 102, .14);  --ok-ink: #11683A;
  --no-bg: rgba(200, 60, 50, .1);    --no-ink: #A12A20;

  /* ألوان الفئات فاتحة (خلفيات) — للنص والحدود نستعمل النسخة الغامقة ink/line */
  --accent: var(--c-brand);
  --accent-ink: var(--brand-ink);
  --accent-line: #C9A983;
  --accent-12: rgba(232, 201, 160, .18);
  --accent-24: rgba(232, 201, 160, .32);

  /* الخطوط */
  --f-display: 'Rakkas', 'Tajawal', serif;
  --f-body: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;

  --fs-hero: clamp(2.75rem, 2.1rem + 4.6vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --fs-h3: clamp(1.625rem, 1.45rem + .9vw, 2.125rem);
  --fs-price-xl: clamp(2.25rem, 2rem + 2.4vw, 3.5rem);
  --fs-price-md: clamp(1.625rem, 1.5rem + 1vw, 2.125rem);
  --fs-price-sm: clamp(1.25rem, 1.2rem + .4vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-micro: .8125rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* المسافات — شبكة 4px */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-gap: clamp(56px, 8vw, 112px);
  --container: 1120px;

  /* الزوايا */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --bd: 1.5px solid var(--line);
  --bd-rec: 2px solid var(--accent-line);

  /* الظلال */
  --sh-1: 0 1px 2px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.04);
  --sh-glow: 0 0 0 1px var(--accent-line), 0 12px 36px -10px rgba(0,0,0,.18);
  --sh-float: 0 8px 28px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);

  /* الحركة */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;

  --z-header: 50; --z-float: 60; --z-toast: 70;
  --tap: 48px;
  --header-h: 160px; /* الهوية + التنقّل الرئيسي + شريط الفئات — للتمرير للمراسي */
}

/* --accent-12/24 من الـaccent الفعّال (متصفحات حديثة). القديمة تبقى على قيم الرملي فوق.
   accent-ink = نسخة غامقة من لون الفئة للنص على الأبيض (تباين ≥4.5:1). */
@supports (color: color-mix(in srgb, red 10%, transparent)) {
  :root, [data-cat] {
    --accent-12: color-mix(in srgb, var(--accent) 18%, transparent);
    --accent-24: color-mix(in srgb, var(--accent) 32%, transparent);
    --accent-ink: color-mix(in srgb, var(--accent) 42%, #161616);
    --accent-line: color-mix(in srgb, var(--accent) 75%, #161616);
  }
}