/* ============================================================
   JODFAY — Design Tokens
   المصدر: الشعار الرسمي (تدرج بنفسجي + فضي معدني + كحلي غامق)
   ============================================================ */
:root {
  /* ---- Brand scale (مشتقة من تدرج الشعار) ---- */
  --brand-50:  #F8F1FF;
  --brand-100: #EFE1FF;
  --brand-200: #DFC5FF;
  --brand-300: #C99CFB;
  --brand-400: #B36BFF;
  --brand-500: #9440EC;
  --brand-600: #8E2DE2;
  --brand-700: #6C13C4;
  --brand-800: #52108F;
  --brand-900: #3A0B66;

  /* كحلي الشعار (لون الاسم النصي) */
  --navy-800: #2B2660;
  --navy-900: #221D4E;

  /* فضي معدني (الهلال الداخلي) */
  --silver-100: #F4F5F8;
  --silver-300: #D9DBE3;
  --silver-500: #AEB2C2;

  /* ---- Semantic: dark theme (الافتراضي) ---- */
  --bg:        #0A0614;
  --bg-2:      #0E0920;
  --surface:   #150D2B;
  --surface-2: #1D1338;
  --glass:     rgba(29, 19, 56, .55);
  --glass-brd: rgba(179, 107, 255, .14);

  --text:       #F3EFFB;
  --text-2:     #CDC5E2;
  --text-muted: #968CB8;

  --border:        rgba(179, 107, 255, .16);
  --border-strong: rgba(179, 107, 255, .38);

  --success: #34C77B;
  --warning: #F5A524;
  --error:   #F0506E;

  --glow:      rgba(148, 64, 236, .50);
  --glow-soft: rgba(148, 64, 236, .20);

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(135deg, #B36BFF 0%, #8E2DE2 55%, #6C13C4 100%);
  /* تدرّج الأزرار: كل درجاته تحقق تباين 4.5:1 مع النص الأبيض */
  --grad-cta:   linear-gradient(135deg, #9C46EC 0%, #8E2DE2 55%, #6C13C4 100%);
  --grad-deep:  linear-gradient(160deg, #1D1338 0%, #0A0614 70%);
  --grad-text:  linear-gradient(110deg, #E9D8FF 10%, #B36BFF 48%, #D9C2FF 90%);
  --grad-line:  linear-gradient(90deg, transparent, rgba(179,107,255,.55), transparent);
  --grad-silver: linear-gradient(135deg, #FFFFFF 0%, #AEB2C2 100%);

  /* ---- Shadows ---- */
  --shadow-1: 0 2px 10px rgba(5, 2, 12, .35);
  --shadow-2: 0 12px 40px -8px rgba(5, 2, 12, .55);
  --shadow-3: 0 32px 80px -16px rgba(5, 2, 12, .65);
  --shadow-glow: 0 0 44px -6px var(--glow);
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 48px -16px rgba(5,2,12,.6);

  /* ---- Typography ---- */
  --font-main: "Alexandria", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
  --fs-hero: clamp(2.35rem, 1.1rem + 4.6vw, 4.35rem);
  --fs-h2:   clamp(1.7rem, 1.05rem + 2.4vw, 2.8rem);
  --fs-h3:   clamp(1.25rem, 1rem + 1vw, 1.7rem);
  --fs-h4:   1.12rem;
  --fs-body: 1rem;
  --fs-lg:   clamp(1.05rem, .95rem + .5vw, 1.3rem);
  --fs-sm:   .875rem;
  --fs-xs:   .78rem;
  /* 1.55 لأن حروف العربية (الشدّة فوق، ذيل الياء تحت) تتصادم دون ذلك */
  --lh-tight: 1.55;
  --lh-head:  1.35;
  --lh-body:  1.85; /* ارتفاع سطر مريح للعربية */

  /* ---- Spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---- Radius ---- */
  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 32px; --r-full: 999px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.35, .44, 1);
  --ease-curtain: cubic-bezier(.76, 0, .24, 1);
  --dur-1: .25s; --dur-2: .55s; --dur-3: .9s;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1360px;
  --nav-h: 74px;

  /* ---- Z ---- */
  --z-nav: 100; --z-drawer: 120; --z-curtain: 200;

  color-scheme: dark;
}

/* ---- فصول فاتحة (أقسام light داخل الصفحة) ---- */
.chapter--light {
  --bg:        #FAF8FE;
  --bg-2:      #F3EFFB;
  --surface:   #FFFFFF;
  --surface-2: #F6F2FD;
  --glass:     rgba(255, 255, 255, .72);
  --glass-brd: rgba(108, 19, 196, .10);

  --text:       #231C44;
  --text-2:     #4A4270;
  --text-muted: #746C99;

  --border:        rgba(108, 19, 196, .12);
  --border-strong: rgba(108, 19, 196, .30);

  --glow:      rgba(148, 64, 236, .28);
  --glow-soft: rgba(148, 64, 236, .10);

  --grad-text: linear-gradient(110deg, #6C13C4 10%, #8E2DE2 48%, #B36BFF 90%);

  --shadow-1: 0 2px 10px rgba(58, 11, 102, .07);
  --shadow-2: 0 12px 40px -8px rgba(58, 11, 102, .12);
  --shadow-3: 0 32px 80px -16px rgba(58, 11, 102, .16);
  --shadow-card: 0 1px 0 rgba(255,255,255,.9) inset, 0 16px 48px -18px rgba(58,11,102,.14);

  color-scheme: light;
}