/* ============================================================================
   شمس — الرموز التصميمية (Design Tokens) · هوية «رمل وضياء»
   أساس عاجي فاتح، ذهب الغروب للتمييز، وكحلي الشعار للنصوص. الشعار نفسه يبقى
   بألوانه الأصلية (كحلي + ليموني). تغيير الهوية كلها يبدأ من هنا.
   ========================================================================= */

:root {
  /* ── ألوان الهوية ─────────────────────────────────────────────────────── */
  --ivory:         #fbf8f1;   /* العاجي — الخلفية الأساسية */
  --ivory-raised:  #fffdf8;   /* بطاقات فوق العاجي */
  --sand:          #f3ecdf;   /* الرملي — أقسام وسيطة */
  --dune:          #e9dcc4;   /* الكثبان — حدود وخلفيات صور وأقسام أعمق */
  --dune-deep:     #d8c6a6;   /* حدود أوضح على الرملي */

  --gold:          #b8873a;   /* ذهب الغروب — خطوط وأقراص ومؤشّرات (زخرفي) */
  --gold-ink:      #85591a;   /* ذهب نصّي على العاجي والرملي — تباين ≥ 4.5:1 */
  --gold-deep:     #744d14;   /* ذهب نصّي على الكثبان */
  --gold-glow:     #e2bf7e;   /* ذهب مضيء على الغسق */

  --ink:           #2f3064;   /* كحلي الشعار — العناوين */
  --ink-soft:      #4d4a5f;   /* نص الجسم */
  --ink-mute:      #6a6475;   /* نصوص ثانوية */

  --dusk:          #1f2040;   /* الغسق — السطح الداكن الوحيد */
  --dusk-raised:   #2a2b52;

  --lime:          #b6b71b;   /* ليموني الشعار — للشعار ونقطة الشمس فقط */

  /* توافق مع أسماء قديمة ما زالت مستخدمة في بعض المكوّنات */
  --paper:         var(--ivory);
  --navy:          var(--ink);
  --navy-deep:     var(--ink);
  --navy-abyss:    var(--dusk);

  /* ── ألوان دلالية تتبدّل حسب سطح القسم ────────────────────────────────── */
  --bg:            var(--ivory);
  --bg-raised:     var(--ivory-raised);
  --fg:            var(--ink);
  --fg-dim:        var(--ink-soft);
  --fg-mute:       var(--ink-mute);
  --rule:          rgb(47 48 100 / .12);
  --rule-strong:   rgb(47 48 100 / .26);
  --accent:        var(--gold-ink);
  --accent-deco:   var(--gold);
  --accent-ink:    var(--ivory);
  --shadow:        0 1.5rem 3.5rem -1.75rem rgb(92 66 30 / .28);

  /* ── الطباعة ──────────────────────────────────────────────────────────── */
  --font-display: "El Messiri", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-mega:   clamp(3rem, 10vw, 8.5rem);
  --fs-display:clamp(2.35rem, 6.2vw, 5.25rem);
  --fs-h1:     clamp(2.1rem, 5vw, 4rem);
  --fs-h2:     clamp(1.75rem, 3.6vw, 3rem);
  --fs-h3:     clamp(1.3rem, 2.1vw, 1.8rem);
  --fs-h4:     clamp(1.1rem, 1.45vw, 1.3rem);
  --fs-lead:   clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:   clamp(.95rem, 1.05vw, 1.0625rem);
  --fs-small:  .9rem;
  --fs-micro:  .8rem;

  --lh-tight: 1.45;   /* النسخ يحتاج فسحة أكبر من الكوفي لنزول الحروف والتشكيل */
  --lh-snug:  1.5;
  --lh-body:  1.9;

  --tracking-wide: .02em;   /* العربية متّصلة — التباعد الواسع يقطع الحروف */

  /* ── المسافات والقياسات ───────────────────────────────────────────────── */
  --gutter:    clamp(1.25rem, 4.2vw, 4.5rem);
  --maxw:      84rem;
  --maxw-text: 62ch;
  --section-y: clamp(4.5rem, 9.5vw, 10rem);
  --header-h:  clamp(4.25rem, 6vw, 5.5rem);

  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.75rem; --s-8: 3.5rem;
  --s-9: 4.5rem;  --s-10: 6rem;   --s-11: 8rem;

  --r-1: .25rem;  --r-2: .5rem;   --r-3: 1rem;  --r-4: 1.5rem;
  --r-pill: 62.5rem;
  --r-arch: 999px;    /* قوس كامل — نافذة الشمس */

  /* ── الحركة ───────────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --ease-both: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .3s;
  --dur-2: .6s;
  --dur-3: 1s;
  --dur-4: 1.6s;

  --z-wave: 1;
  --z-raise: 5;
  --z-header: 60;
  --z-drawer: 70;
  --z-curtain: 90;
}

/* ── الأسطح ──────────────────────────────────────────────────────────────
   كل مكوّن يقرأ من المتغيّرات الدلالية أعلاه فقط، فيتبدّل تلقائيًا مع سطحه. */

.surface-ivory {
  --bg: var(--ivory);      --bg-raised: var(--ivory-raised);
  --fg: var(--ink);        --fg-dim: var(--ink-soft);  --fg-mute: var(--ink-mute);
  --rule: rgb(47 48 100 / .12);    --rule-strong: rgb(47 48 100 / .26);
  --accent: var(--gold-ink);       --accent-deco: var(--gold);  --accent-ink: var(--ivory);
  --shadow: 0 1.5rem 3.5rem -1.75rem rgb(92 66 30 / .28);
  background: var(--bg); color: var(--fg);
}

.surface-sand {
  --bg: var(--sand);       --bg-raised: var(--ivory);
  --fg: var(--ink);        --fg-dim: #4a475b;  --fg-mute: #645e6e;
  --rule: rgb(47 48 100 / .13);    --rule-strong: rgb(47 48 100 / .28);
  --accent: var(--gold-ink);       --accent-deco: var(--gold);  --accent-ink: var(--ivory);
  --shadow: 0 1.5rem 3.5rem -1.75rem rgb(92 66 30 / .3);
  background: var(--bg); color: var(--fg);
}

.surface-dune {
  --bg: var(--dune);       --bg-raised: var(--sand);
  --fg: var(--ink);        --fg-dim: #433f52;  --fg-mute: #57505f;
  --rule: rgb(47 48 100 / .16);    --rule-strong: rgb(47 48 100 / .32);
  --accent: var(--gold-deep);      --accent-deco: #9c6f2a;  --accent-ink: var(--ivory);
  --shadow: 0 1.5rem 3.5rem -1.75rem rgb(92 66 30 / .34);
  background: var(--bg); color: var(--fg);
}

.surface-dusk {
  --bg: var(--dusk);       --bg-raised: var(--dusk-raised);
  --fg: var(--ivory);      --fg-dim: #c4c1d2;  --fg-mute: #9a97b0;
  --rule: rgb(251 248 241 / .13);  --rule-strong: rgb(251 248 241 / .28);
  --accent: var(--gold-glow);      --accent-deco: var(--gold-glow);  --accent-ink: var(--dusk);
  --shadow: 0 1.5rem 4rem -1.5rem rgb(8 8 20 / .7);
  background: var(--bg); color: var(--fg);
}