/* =========================================================================
   محاكي قياس — 01-tokens.css
   نظام المتغيّرات · اتجاه Modern Native
   ⚠️ الألوان مطابقة 100% لملفاتك الأصلية — لم يُغيَّر أي hex.
   ========================================================================= */

:root{

  /* ---------------------------------------------------------------------
     الألوان — نفس القيم الموجودة في index.html و quiz.html حالياً
     --------------------------------------------------------------------- */
  --primary:        #1a4f8a;
  --primary-light:  #2563ab;
  --primary-dark:   #0f3060;
  --gold:           #c8a84b;
  --gold-light:     #e8cc7a;
  --success:        #1a7a4a;
  --danger:         #c0392b;
  --warning:        #d4890a;
  --bg:             #f5f3ee;
  --surface:        #ffffff;
  --surface2:       #f0ede6;
  --text:           #1a1a2e;
  --text2:          #4a4a6a;
  --text3:          #8888aa;
  --border:         #ddd8cc;

  /* درجات شفّافة مشتقّة من نفس الألوان (للخلفيات الخفيفة) */
  --tint-primary:   rgba(26,79,138,.08);
  --tint-gold:      rgba(200,168,75,.12);
  --tint-success:   rgba(26,122,74,.10);
  --tint-danger:    rgba(192,57,43,.09);
  --tint-warning:   rgba(212,137,10,.10);

  /* لون نص فوق الذهبي (تباين كافٍ) */
  --on-gold:        #3a2f08;
  --gold-text:      #8a6d14;   /* الذهبي كنص على خلفية فاتحة */

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

  --fs-xs:      11px;
  --fs-sm:      12px;
  --fs-body:    13.5px;
  --fs-md:      14px;
  --fs-lg:      15px;
  --fs-card:    17px;
  --fs-section: 18px;
  --fs-page:    21px;
  --fs-hero:    25px;
  --fs-stat:    23px;
  --fs-display: 42px;

  --lh-tight:    1.3;
  --lh-normal:   1.6;
  --lh-readable: 1.85;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------------------------------------------------------------------
     المسافات
     --------------------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;

  --page-pad:    16px;
  --section-gap: 16px;
  --card-pad:    18px;
  --card-gap:    12px;
  --content-max: 980px;

  /* ---------------------------------------------------------------------
     الأشكال — Modern Native
     --------------------------------------------------------------------- */
  --r-xl:   22px;
  --r-lg:   18px;
  --r-md:   14px;
  --r-sm:   10px;
  --r-xs:   6px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------
     الظلال
     --------------------------------------------------------------------- */
  --sh-card:  0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.10);
  --sh-raise: 0 2px 4px rgba(16,24,40,.05), 0 16px 32px -12px rgba(16,24,40,.16);
  --sh-nav:   0 -1px 0 var(--border), 0 -8px 24px -12px rgba(16,24,40,.14);
  --sh-btn-primary: 0 4px 14px -4px rgba(26,79,138,.5);
  --sh-btn-gold:    0 4px 14px -4px rgba(200,168,75,.5);
  --sh-btn-danger:  0 4px 14px -4px rgba(192,57,43,.45);
  --sh-sheet: 0 -12px 40px rgba(0,0,0,.3);

  /* ---------------------------------------------------------------------
     أخرى
     --------------------------------------------------------------------- */
  --tap-min:  48px;                 /* الحد الأدنى لمساحة اللمس — إلزامي في المتجرين */
  --ease:     cubic-bezier(.4,0,.2,1);
  --dur:      .18s;
  --tabbar-h: 64px;
  --header-h: 56px;
  --z-header: 100;
  --z-tabbar: 100;
  --z-sheet:  200;
}


/* =========================================================================
   الوضع الليلي
   نفس درجات الهوية مع رفع الإضاءة للتباين — متطلّب إلزامي في مراجعة المتاجر.
   يُفعَّل بـ <html data-theme="dark">  أو تلقائياً حسب إعداد النظام.
   ========================================================================= */
[data-theme="dark"]{
  --primary:        #4a8ed0;
  --primary-light:  #6aa6e0;
  --primary-dark:   #1a4f8a;
  --gold:           #d4b661;
  --gold-light:     #e8cc7a;
  --success:        #3da96f;
  --danger:         #e05a4c;
  --warning:        #e0a13a;
  --bg:             #12151c;
  --surface:        #1b202b;
  --surface2:       #242b39;
  --text:           #f3f1ec;
  --text2:          #b9c0cf;
  --text3:          #7f8a9e;
  --border:         #2d3545;

  --tint-primary:   rgba(74,142,208,.14);
  --tint-gold:      rgba(212,182,97,.14);
  --tint-success:   rgba(61,169,111,.14);
  --tint-danger:    rgba(224,90,76,.14);
  --tint-warning:   rgba(224,161,58,.14);

  --on-gold:        #1a1400;
  --gold-text:      #d4b661;

  --sh-card:  0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
  --sh-raise: 0 2px 6px rgba(0,0,0,.5), 0 16px 32px -12px rgba(0,0,0,.6);
  --sh-nav:   0 -1px 0 var(--border), 0 -8px 24px -12px rgba(0,0,0,.6);
  --sh-sheet: 0 -12px 40px rgba(0,0,0,.6);
}

/* اتباع إعداد النظام تلقائياً ما لم يختر المستخدم يدوياً */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --primary:#4a8ed0; --primary-light:#6aa6e0; --primary-dark:#1a4f8a;
    --gold:#d4b661; --gold-light:#e8cc7a;
    --success:#3da96f; --danger:#e05a4c; --warning:#e0a13a;
    --bg:#12151c; --surface:#1b202b; --surface2:#242b39;
    --text:#f3f1ec; --text2:#b9c0cf; --text3:#7f8a9e; --border:#2d3545;
    --tint-primary:rgba(74,142,208,.14);
    --tint-gold:rgba(212,182,97,.14);
    --tint-success:rgba(61,169,111,.14);
    --tint-danger:rgba(224,90,76,.14);
    --tint-warning:rgba(224,161,58,.14);
    --on-gold:#1a1400; --gold-text:#d4b661;
    --sh-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
    --sh-raise:0 2px 6px rgba(0,0,0,.5), 0 16px 32px -12px rgba(0,0,0,.6);
    --sh-nav:0 -1px 0 var(--border), 0 -8px 24px -12px rgba(0,0,0,.6);
    --sh-sheet:0 -12px 40px rgba(0,0,0,.6);
  }
}