/* tokens.css — الطبقة الوحيدة اللي فيها لون أو مقاس. أي ملف تاني بيستعمل المتغيرات دي بس.
   ليه؟ عشان الثيم الفاتح والغامق يتغيّروا من مكان واحد، ومحدش يحط لون بإيده في نص الـCSS
   وبعدين يفضل ثابت في الثيم التاني. ده بالظبط اللي بيخلّي الواجهة تبان «ناقصة» في الضلمة.

   اللوجيك بتاع الألوان: المنتج ده بيطلّع ورق مطبوع، فالواجهة لازم تحس إنها ورق —
   خلفية دافية مش بيضا تلج، حبر أخضر غامق، وخط دهبي رفيع زي خط المسطرة في المذكرة.
   النعناعي لون واحد بس للأكشن، مش بنرشّه في كل حتة. */

:root {
  color-scheme: light dark;

  /* ===== براند Q Marketing — تلات ألوان بس، زي ما هم في كل منتجات الشركة ===== */
  --brand-green: #06231b;
  --brand-mint:  #85d3ab;
  --brand-gold:  #e8b34d;

  /* ===== الثيم الفاتح (الافتراضي — الطباعة مرجعنا) ===== */
  --ground:   #f6f3ec;   /* لون ورق، مش #fff. الأبيض الصافي بيوجع في شاشة الموبايل بالنهار */
  --sheet:    #fffdf8;   /* «الورقة» — أي بلوك محتوى بيقف على الأرضية دي */
  --sheet-2:  #f0ece2;   /* بلوك ساكن: جدول، خانة إدخال، شريط تقدّم */
  --ink:      #06231b;   /* نفس الأخضر الغامق — الحبر الأساسي */
  --ink-2:    #3d5a4f;   /* سطر شرح */
  --ink-3:    #6f8a7e;   /* تسمية صغيرة / نص باهت */
  --on-brand: #f3fbf6;   /* نص فوق الأخضر الغامق */
  --line:     rgba(6, 35, 27, .14);
  --line-2:   rgba(6, 35, 27, .28);
  --accent:      #1c7a52;  /* نعناعي غامق — عشان يعدّي التباين على خلفية فاتحة */
  --accent-soft: #d8efe2;
  --gold:        #a9761a;  /* دهبي غامق للنص على الفاتح */
  --gold-soft:   #f6e7c6;
  --danger:      #a8321f;
  --danger-soft: #f8e0da;
  --shadow: 0 1px 2px rgba(6,35,27,.06), 0 8px 24px -12px rgba(6,35,27,.18);
  --shadow-lift: 0 2px 4px rgba(6,35,27,.07), 0 18px 40px -18px rgba(6,35,27,.30);

  /* ===== مقاسات ===== */
  --r-sm: 6px; --r: 10px; --r-lg: 18px;   /* مش كله دايرة واحدة — الحواف بتفرّق بين الأنواع */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 36px; --s7: 56px; --s8: 88px;
  --gutter: clamp(16px, 4vw, 48px);
  --tap: 44px;                            /* أصغر هدف لمس — مفيش زرار أقل من كده */
  --maxw: 1140px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ===== الخطوط =====
     Cairo للعناوين (عريض وواضح في اللافتات)، Tajawal للواجهة (أهدى في النص الصغير). */
  --font-head: "Cairo", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-ui:   "Tajawal", "Cairo", system-ui, sans-serif;

  --fs-xs: clamp(.75rem,  .72rem + .12vw, .8125rem);
  --fs-sm: clamp(.8125rem,.79rem + .14vw, .9375rem);
  --fs-md: clamp(.9375rem,.90rem + .20vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + .40vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.18rem + .90vw, 2rem);
  --fs-2xl: clamp(1.75rem, 1.30rem + 2.1vw, 3.25rem);
  --fs-input: max(16px, 1rem);            /* أقل من 16px = iOS بيزوّم لوحده على الخانة */
}

/* ===== الثيم الغامق =====
   مربوط بإعداد الجهاز، وقابل للكسر بـ data-theme على <html> (زرار الثيم في الهيدر).
   الأخضر الغامق هنا هو الأرضية نفسها — مش رمادي، عشان البراند يفضل باين في الضلمة. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:  #051913;
    --sheet:   #06231b;
    --sheet-2: #0a3127;
    --ink:     #eaf5ef;
    --ink-2:   #a8c7b8;
    --ink-3:   #7fa493;
    --on-brand:#06231b;
    --line:    rgba(234, 245, 239, .13);
    --line-2:  rgba(234, 245, 239, .26);
    --accent:      #85d3ab;
    --accent-soft: #0f3f30;
    --gold:        #e8b34d;
    --gold-soft:   #3a2d12;
    --danger:      #f0a496;
    --danger-soft: #3d1a14;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.70);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.40), 0 22px 48px -20px rgba(0,0,0,.80);
  }
}

:root[data-theme="dark"] {
  --ground:  #051913;
  --sheet:   #06231b;
  --sheet-2: #0a3127;
  --ink:     #eaf5ef;
  --ink-2:   #a8c7b8;
  --ink-3:   #7fa493;
  --on-brand:#06231b;
  --line:    rgba(234, 245, 239, .13);
  --line-2:  rgba(234, 245, 239, .26);
  --accent:      #85d3ab;
  --accent-soft: #0f3f30;
  --gold:        #e8b34d;
  --gold-soft:   #3a2d12;
  --danger:      #f0a496;
  --danger-soft: #3d1a14;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.70);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.40), 0 22px 48px -20px rgba(0,0,0,.80);
}