/* ════════════════════════════════════════════════════════════
   نظام الثيمين — تطبيق المنيو
   الافتراضي (:root، بلا data-theme) هو الثيم الفاتح — كريمي/ذهبي/ملكي.
   [data-theme="dark"] هو التصميم الأصلي بالضبط — مرجع مجمّد، لا تُغيَّر
   قيمه. التبديل الفعلي (قراءة/كتابة data-theme + localStorage) في
   apps/menu/shared/theme.js.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── الذهبي: هوية ثابتة، لا تتغيّر بين الثيمين ── */
  --gold-1: #f6e2b8;
  --gold-2: #ddb06a;
  --gold-3: #c58a3e;
  --gold-4: #8c5a23;
  /* قناة RGB مفصولة بمسافات (لا فواصل) — تُستخدم كـrgb(var(--gold-ink) / X)
     في القواعد التي تحتاج شفافيات متفاوتة من نفس الذهبي، بلا تعريف متغيّر
     منفصل لكل شفافية. ثابتة في الثيمين مثل بقية درجات الذهبي. */
  --gold-ink: 221 176 106;

  /* ── الثيم الفاتح (الافتراضي الجديد) ── */
  --bg-dark: #f4ebdd;      /* خلفية الصفحة — كريمي دافئ */
  --bg-soft: #efe2c9;
  --bg-brown: #e6d5b3;     /* تدرّج ثانوي/أعمق قليلًا */

  --text-primary: #3a2415;              /* بني إسبريسو داكن */
  --text-secondary: rgba(58, 36, 21, 0.72); /* بني دافئ */

  --glass-bg-1: rgba(255, 253, 246, 0.85);
  --glass-bg-2: rgba(250, 242, 224, 0.85);
  --glass-border: rgba(58, 36, 21, 0.14);   /* بني مكتوم */
  --gold-border: rgba(180, 128, 58, 0.4);   /* ذهبي ناعم — للحدود على السطوح الفاتحة */

  --shadow-soft: 0 12px 30px rgba(58, 36, 21, 0.12);
  --shadow-large: 0 24px 70px rgba(58, 36, 21, 0.18);
  /* ظل النصوص فوق الخلفيات المصوّرة/المتدرّجة — خافت جدًا على الفاتح
     (النص أصلًا داكن على خلفية فاتحة، لا حاجة لظل أسود يُوحّشه) */
  --text-shadow-heading: 0 1px 3px rgba(58, 36, 21, 0.1);
  --text-shadow-body: 0 1px 2px rgba(58, 36, 21, 0.08);

  /* أسطح البطاقات — عاجي أفتح من خلفية الصفحة (وليس أغمق منها)، فتبدو
     البطاقة "مرفوعة" فوق الصفحة كما يطلب البريف. القيم مطابقة رقميًا
     لشفافيات rgba(12,6,3,X) الأصلية في main-menu.css لتسهيل الاستبدال
     المباشر مكانًا بمكان. */
  --surface-1: rgba(255, 253, 246, 0.55);
  --surface-2: rgba(255, 253, 246, 0.7);
  --surface-3: rgba(255, 253, 246, 0.85);
  --overlay-strong: rgba(74, 52, 30, 0.55);
  --overlay-soft: rgba(74, 52, 30, 0.28);
  --on-surface-subtle: rgba(58, 36, 21, 0.5); /* بديل الأبيض الشفاف الخافت (handle bar...) */

  /* تراكب شريط علوي يتلاشى فوق محتوى يمرّر تحته (main-menu) */
  --topbar-scrim-1: rgba(255, 253, 246, 0.92);
  --topbar-scrim-2: rgba(255, 253, 246, 0.7);

  /* تدرّج خلفية الشاشة (3 وقفات) — يُستخدم في welcome/calibrate/ar-prepare */
  --page-grad-1: #faf2e2;
  --page-grad-2: #f4ebdd;
  --page-grad-3: #efe0c3;

  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 34px;

  /* مقياس radius جديد (بريف إعادة التصميم STEP 4/١٠) — إضافي، لا يستبدل ما فوق.
     يُستخدم حصريًا في المكوّنات المعاد بناؤها (شبكة بطاقات المنيو، تفاصيل
     الطبق) حتى يجيء المسح الشامل لاحقًا في STEP 4. */
  --card-radius-sm: 12px;
  --card-radius-md: 16px;
  --card-radius-lg: 20px;
  --card-radius-xl: 24px;
  --card-radius-pill: 999px;

  --transition: 0.3s ease;
}

/* ── الثيم الداكن — التصميم الأصلي بالضبط، مرجع مجمّد ── */
:root[data-theme="dark"] {
  --bg-dark: #120905;
  --bg-soft: #1b0f08;
  --bg-brown: #24140a;

  --text-primary: #f8f2e8;
  --text-secondary: rgba(248, 242, 232, 0.78);

  --glass-bg-1: rgba(54, 31, 14, 0.78);
  --glass-bg-2: rgba(24, 11, 5, 0.78);
  --glass-border: rgba(255, 226, 180, 0.22);
  --gold-border: rgba(221, 176, 106, 0.35);

  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.32);
  --shadow-large: 0 24px 70px rgba(0, 0, 0, 0.58);
  --text-shadow-heading: 0 3px 18px rgba(0, 0, 0, 0.55);
  --text-shadow-body: 0 2px 14px rgba(0, 0, 0, 0.45);

  --surface-1: rgba(12, 6, 3, 0.34);
  --surface-2: rgba(12, 6, 3, 0.42);
  --surface-3: rgba(23, 11, 5, 0.75);
  --overlay-strong: rgba(6, 3, 1, 0.78);
  --overlay-soft: rgba(6, 3, 1, 0.5);
  --on-surface-subtle: rgba(248, 242, 232, 0.55);

  --topbar-scrim-1: rgba(15, 7, 4, 0.92);
  --topbar-scrim-2: rgba(15, 7, 4, 0.7);

  --page-grad-1: #160b05;
  --page-grad-2: #0d0603;
  --page-grad-3: #1b0d06;
}