/* ============================================================================
   شمس — الرموز التصميمية (Design Tokens)
   كل ألوان الهوية مستخرجة من «SHAMS logo.pdf». تغيير الهوية كلها يبدأ من هنا.
   ========================================================================= */

:root {
  /* ── ألوان الهوية ─────────────────────────────────────────────────────── */
  --navy:          #2f3064;   /* كحلي الشعار — اللون الأساسي */
  --navy-deep:     #23244a;   /* درجة أعمق للأقسام السينمائية */
  --navy-abyss:    #171833;   /* أعمق درجة — التذييل وقاع التدرّجات */
  --navy-soft:     #3d3e78;   /* درجة أفتح للحدود والتفاصيل */

  --lime:          #b6b71b;   /* ليموني الشعار — لون الشمس */
  --lime-bright:   #d4d54a;   /* نسخة مضيئة على الخلفيات الداكنة */
  --lime-ink:      #6b6c10;   /* نسخة نصّية على الخلفيات الفاتحة — تباين 5.1:1 */
  --lime-glow:     #e8e97a;   /* وهج الشروق */

  --paper:         #f7f5ee;   /* الورقي — الخلفية الفاتحة */
  --sand:          #ece7d9;   /* الرملي — خلفيات وسيطة */
  --sand-deep:     #d9d3bf;   /* حدود على الفاتح */

  /* ── ألوان دلالية تتبدّل حسب سطح القسم ────────────────────────────────── */
  --bg:            var(--navy-deep);
  --bg-raised:     #2a2b55;
  --fg:            var(--paper);
  --fg-dim:        #b9b8cd;
  --fg-mute:       #8d8ca8;
  --rule:          rgb(247 245 238 / .14);
  --rule-strong:   rgb(247 245 238 / .28);
  --accent:        var(--lime-bright);
  --accent-ink:    var(--navy-deep);
  --shadow:        0 1.5rem 4rem -1.5rem rgb(10 10 26 / .65);

  /* ── الطباعة ──────────────────────────────────────────────────────────── */
  --font-display: "Reem Kufi", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-body:    "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-mega:   clamp(3rem, 10.5vw, 9rem);
  --fs-display:clamp(2.4rem, 6.6vw, 5.5rem);
  --fs-h1:     clamp(2.1rem, 5.2vw, 4.25rem);
  --fs-h2:     clamp(1.7rem, 3.6vw, 3rem);
  --fs-h3:     clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4:     clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-lead:   clamp(1.05rem, 1.55vw, 1.375rem);
  --fs-body:   clamp(.95rem, 1.05vw, 1.0625rem);
  --fs-small:  .875rem;
  --fs-micro:  .78rem;

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

  --tracking-wide: .22em;   /* للعناوين الفوقية اللاتينية/العربية الصغيرة */

  /* ── المسافات والقياسات ───────────────────────────────────────────────── */
  --gutter:    clamp(1.25rem, 4.2vw, 4.5rem);
  --maxw:      86rem;
  --maxw-text: 62ch;
  --section-y: clamp(4.5rem, 9vw, 9.5rem);
  --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: .75rem;  --r-3: 1.5rem;  --r-4: 2.25rem;
  --r-pill: 62.5rem;

  /* ── الحركة ───────────────────────────────────────────────────────────── */
  --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: .28s;
  --dur-2: .55s;
  --dur-3: .9s;
  --dur-4: 1.5s;

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

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

.surface-navy {
  --bg: var(--navy-deep);  --bg-raised: #2a2b55;
  --fg: var(--paper);      --fg-dim: #b9b8cd;  --fg-mute: #8d8ca8;
  --rule: rgb(247 245 238 / .14);  --rule-strong: rgb(247 245 238 / .3);
  --accent: var(--lime-bright);    --accent-ink: var(--navy-deep);
  --shadow: 0 1.5rem 4rem -1.5rem rgb(10 10 26 / .65);
  background: var(--bg); color: var(--fg);
}

.surface-abyss {
  --bg: var(--navy-abyss); --bg-raised: #22234a;
  --fg: var(--paper);      --fg-dim: #b3b2c8;  --fg-mute: #85849f;
  --rule: rgb(247 245 238 / .12);  --rule-strong: rgb(247 245 238 / .26);
  --accent: var(--lime-bright);    --accent-ink: var(--navy-abyss);
  --shadow: 0 1.5rem 4rem -1.5rem rgb(5 5 18 / .75);
  background: var(--bg); color: var(--fg);
}

.surface-paper {
  --bg: var(--paper);      --bg-raised: #fffdf7;
  --fg: var(--navy-deep);  --fg-dim: #4c4d70;  --fg-mute: #63647f;
  --rule: rgb(47 48 100 / .14);    --rule-strong: rgb(47 48 100 / .3);
  --accent: var(--lime-ink);       --accent-ink: var(--paper);
  --shadow: 0 1.25rem 3.5rem -1.5rem rgb(47 48 100 / .2);
  background: var(--bg); color: var(--fg);
}

.surface-sand {
  --bg: var(--sand);       --bg-raised: var(--paper);
  --fg: var(--navy-deep);  --fg-dim: #4a4b6c;  --fg-mute: #5f6079;
  --rule: rgb(47 48 100 / .16);    --rule-strong: rgb(47 48 100 / .32);
  --accent: var(--lime-ink);       --accent-ink: var(--paper);
  --shadow: 0 1.25rem 3.5rem -1.5rem rgb(47 48 100 / .22);
  background: var(--bg); color: var(--fg);
}