/* ═══ رموزُ التصميم ═══════════════════════════════════════════
   لوحةٌ واحدةٌ تحكم الموقع كلَّه: الألوانُ والخطوطُ والمسافاتُ والحركة.
   الوضعُ الفاتح هو الأصل، والليليُّ يعيد تعريف الرموز فقط.
   ═════════════════════════════════════════════════════════ */

:root {
  /* ── الألوان: ورقٌ دافئٌ وحبرٌ عميق ── */
  --paper:      #FBFAF7;
  --paper-2:    #F3F1EB;
  --surface:    #FFFFFF;
  --surface-2:  #F7F5F0;
  --ink:        #15141B;
  --ink-2:      #3A3844;
  --muted:      #6A6775;
  --line:       #E4E0D7;
  --line-soft:  #EFECE5;

  --brand:      #16597D;   /* أزرقُ ختم الموقع نفسه */
  --brand-ink:  #FFFFFF;
  --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent);
  --spark:      #E0245E;
  --amber:      #F0A202;
  --accent:     var(--brand);

  --shadow-sm: 0 1px 2px rgb(20 18 30 / .05), 0 2px 8px rgb(20 18 30 / .04);
  --shadow-md: 0 2px 6px rgb(20 18 30 / .06), 0 12px 32px rgb(20 18 30 / .08);
  --shadow-lg: 0 8px 24px rgb(20 18 30 / .10), 0 32px 64px rgb(20 18 30 / .12);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);

  /* ── الخطوط ── */
  --font-display: "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  /* الرقمُ من الخطّ الأحاديّ، والحرفُ العربيُّ يعود إلى خطّ المتن */
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, SFMono-Regular, monospace;

  --step--1: clamp(.78rem, .76rem + .12vw, .84rem);
  --step-0:  clamp(.95rem, .92rem + .2vw, 1.03rem);
  --step-1:  clamp(1.1rem, 1.04rem + .34vw, 1.28rem);
  --step-2:  clamp(1.3rem, 1.18rem + .62vw, 1.66rem);
  --step-3:  clamp(1.55rem, 1.32rem + 1.05vw, 2.2rem);
  --step-4:  clamp(1.85rem, 1.42rem + 1.9vw, 3rem);
  --step-5:  clamp(2.2rem, 1.5rem + 3.1vw, 4.1rem);

  --lh-tight: 1.22;
  --lh-snug: 1.42;
  --lh-body: 1.95;

  /* ── الشبكة والمسافات ── */
  --shell: 1280px;
  --shell-narrow: 760px;
  --gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);
  --gap-lg: clamp(2.2rem, 1.4rem + 3vw, 4.5rem);
  --pad: clamp(1rem, .5rem + 2vw, 2rem);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  --t-fast: .16s cubic-bezier(.2, .7, .3, 1);
  --t-base: .28s cubic-bezier(.2, .7, .3, 1);
  --header-h: 62px;

  color-scheme: light;
}

/* ── الوضعُ الليلي ── */
:root[data-theme="dark"] {
  --paper:      #0B0B10;
  --paper-2:    #111119;
  --surface:    #14141D;
  --surface-2:  #1B1B26;
  --ink:        #F3F1EC;
  --ink-2:      #CFCCD8;
  --muted:      #9B98A8;
  --line:       #272733;
  --line-soft:  #1F1F2A;

  --brand:      #5FB4E8;
  --brand-ink:  #06121B;
  --spark:      #FF5C86;
  --amber:      #FFC14D;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-md: 0 4px 14px rgb(0 0 0 / .5);
  --shadow-lg: 0 18px 50px rgb(0 0 0 / .6);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --paper:      #0B0B10;
    --paper-2:    #111119;
    --surface:    #14141D;
    --surface-2:  #1B1B26;
    --ink:        #F3F1EC;
    --ink-2:      #CFCCD8;
    --muted:      #9B98A8;
    --line:       #272733;
    --line-soft:  #1F1F2A;
    --brand:      #5FB4E8;
    --brand-ink:  #06121B;
    --spark:      #FF5C86;
    --amber:      #FFC14D;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-md: 0 4px 14px rgb(0 0 0 / .5);
    --shadow-lg: 0 18px 50px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}

/* ── حجمُ خطّ القراءة (يضبطه القارئ) ── */
:root[data-size="lg"]  { --step-0: 1.1rem;  --lh-body: 2.05; }
:root[data-size="xl"]  { --step-0: 1.22rem; --lh-body: 2.1; }
:root[data-size="sm"]  { --step-0: .9rem;   --lh-body: 1.85; }