/* ═══════════════════════════════════════════════════════════════
   🖋️ ديوان هديل — رقائق التصميم (Design Tokens)
   ─────────────────────────────────────────────────────────────
   ثيمان معتمدان بنفس الـ Layout:
   • Dark  = Espresso + Copper  (الافتراضي)  خطوط: Amiri + Tajawal
   • Light = Ivory + Deep Navy + Antique Gold  خطوط: Aref Ruqaa + Almarai
   قاعدة 60-30-10 · شبكة 8px · تباين WCAG AA
   ظلال مصبوغة بلون دافئ (أسود دافئ لا أسود صافٍ)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── الطبقة ١: ألوان أولية (Primitive) ─── */

  /* نحاسي — لون الثيم الداكن المميّز */
  --copper-100: #f7e3d0;
  --copper-200: #eec9a9;
  --copper-300: #e5ad7d;
  --copper-400: #dfa970;
  --copper-500: #d18c4f;
  --copper-600: #c2743c;
  --copper-700: #a35c2e;

  /* ذهبي عتيق — لون الثيم الفاتح المميّز */
  --gold-50:  #fdf8ec;
  --gold-100: #f8eecd;
  --gold-200: #f0d99d;
  --gold-300: #e5c471;
  --gold-400: #d8b45a;
  --gold-500: #c9a84c;
  --gold-600: #a8863a;
  --gold-700: #85662c;
  --gold-800: #624b20;

  /* كحلي عميق — اللون الأساسي ل الثيم الفاتح */
  --navy-50:  #eef1f5;
  --navy-100: #dbe3ec;
  --navy-200: #b8c7d8;
  --navy-300: #8ea6c0;
  --navy-400: #5b7ba0;
  --navy-500: #3a5a7c;
  --navy-600: #263b52;
  --navy-700: #1b2b3f;
  --navy-800: #131e2c;

  /* إسبريسو — درجات الخلفية الداكنة */
  --espresso-700: #2a211c;
  --espresso-800: #1c1613;
  --espresso-900: #171210;
  --espresso-950: #12100e;

  /* محايدات دافئة (عاج) — لراحة القراءة في الثيم الفاتح */
  --paper-0:   #fffdf8;
  --paper-25:  #fdfbf5;
  --paper-50:  #faf7f0;
  --paper-100: #f4efe4;
  --paper-200: #eae3d3;
  --paper-300: #dad2bd;
  --paper-400: #c3b9a0;

  /* حبر — للنصوص */
  --ink-900: #1f1c17;
  --ink-800: #322e28;
  --ink-700: #44403a;
  --ink-600: #5c574f;
  --ink-500: #756f66;
  --ink-400: #948d83;

  /* دلالات عامة */
  --success-500: #2e7d5b;
  --success-100: #ddf0e7;
  --error-500:   #b23c33;
  --error-100:   #f8e0dd;
  --warning-500: #b8802a;
  --warning-100: #fbeed6;

  /* ─── المسافات (شبكة 8px) ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ─── أنصاف الأقطار ─── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* ─── أحجام الخطوط (سلّم هرمي) ─── */
  --text-hero:   clamp(2.4rem, 6vw, 4rem);
  --text-title:  clamp(1.5rem, 3vw, 2rem);
  --text-h3:     1.25rem;
  --text-body:   1rem;
  --text-sm:     0.875rem;
  --text-xs:     0.75rem;

  /* ─── الانتقالات ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* ─── الطبقات ─── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* ═══════════════════════════════════════════════════════════════
   الثيم ١ — Espresso + Copper (داكن) · الافتراضي
   ═══════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="dark"] {
  /* الأسطح (60%) */
  --bg-app:      var(--espresso-900);
  --bg-surface:  var(--espresso-700);
  --bg-subtle:   #241c18;
  --bg-inverse:  #ece2d0;

  /* النصوص (30%) */
  --text-primary:   #ece2d0;          /* على #171210 ≈ 13:1 */
  --text-secondary: #c2b5a4;
  --text-muted:     #a2968a;
  --text-dim:       #8d8175;
  --text-heading:   #f4ecdd;
  --text-on-brand:  #26160c;          /* نص داكن فوق أزرار نحاسية ≈ 8:1 */
  --text-on-accent: #faf7f0;

  /* اللون الأساسي — نحاسي */
  --color-primary:       var(--copper-400);
  --color-primary-hover: var(--copper-300);
  --color-primary-soft:  #30221a;

  /* اللون المميز — نحاسي */
  --color-accent:       var(--copper-400);
  --color-accent-hover: var(--copper-300);
  --color-accent-soft:  #2b2119;
  --color-accent-text:  #e3b184;
  --text-accent:        #c99b6c;      /* «أهلاً هديل،» */

  /* الحدود */
  --border-subtle: rgba(236, 226, 208, 0.10);
  --border-default: rgba(236, 226, 208, 0.20);
  --border-accent: rgba(223, 169, 112, 0.45);

  /* الدلالات */
  --color-success: #4fa87f;
  --color-error:   #d76b60;
  --color-warning: #cf9a45;

  /* الظلال — أسود دافئ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 6px 22px rgba(223, 169, 112, 0.18);
  --shadow-focus: 0 0 0 3px rgba(223, 169, 112, 0.28);

  /* الخطوط */
  --font-display: 'Amiri', 'Aref Ruqaa', serif;
  --font-body:    'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  --font-ui:      'Tajawal', 'Cairo', sans-serif;

  /* ─── خلفية الشاشات (Splash + المكتبة) ─── */
  --screen-bg:
    radial-gradient(1100px 620px at 78% -8%, rgba(213, 128, 63, 0.16), transparent 60%),
    radial-gradient(900px 700px at 8% 108%, rgba(126, 70, 42, 0.20), transparent 62%),
    linear-gradient(178deg, #1c1613 0%, #171210 46%, #12100e 100%);
  --pattern: #e3b98a;
  --pattern-op: 0.05;

  /* أسطح شبه شفافة (علبة البحث والأيقونات) */
  --panel: rgba(255, 255, 255, 0.035);
  --panel-b: rgba(236, 226, 208, 0.13);
  --line: rgba(236, 226, 208, 0.09);
  --hover: rgba(255, 255, 255, 0.035);

  /* الخط الذهبي النحاسي الرفيع */
  --rule: rgba(223, 169, 112, 0.5);
  --rule-soft: rgba(223, 169, 112, 0.06);
  --dot: #a9744a;
  --h3: #d9c9b1;

  /* الخشب والرفّ */
  --wood1: #3f2e21;
  --wood2: #251b13;
  --wood3: #171009;
  --wood-shadow: rgba(0, 0, 0, 0.9);
  --wood-hi: rgba(223, 169, 112, 0.20);

  /* الكتب */
  --book-shadow: rgba(0, 0, 0, 0.85);
  --book-shadow-2: rgba(0, 0, 0, 0.5);
  --ring: rgba(223, 169, 112, 0.35);
  --spine: rgba(0, 0, 0, 0.5);
  --cover-line: rgba(255, 255, 255, 0.28);

  /* أغلفة افتراضية */
  --cv1: linear-gradient(155deg, #5c2a20, #3a1712 70%); --cv1-ink: #f2d9c4;
  --cv2: linear-gradient(160deg, #1f3a34, #12211e);     --cv2-ink: #dfeee7;
  --cv3: linear-gradient(200deg, #e8dcc4, #d3c3a4);     --cv3-ink: #4a3826;
  --cv4: linear-gradient(150deg, #2c2f45, #191b28);     --cv4-ink: #dcd9ea;
  --cv5: linear-gradient(160deg, #7a5a26, #4a3716);     --cv5-ink: #f7e9c9;

  /* بطاقة «من دفترك» */
  --note-b: rgba(223, 169, 112, 0.25);
  --note-bg: linear-gradient(150deg, rgba(213, 128, 63, 0.10), rgba(213, 128, 63, 0.02));
  --note-fg: #e2d3ba;
  --note-small: #a9744a;

  /* زر «كتاب جديد» */
  --fab-bg: linear-gradient(140deg, #e0a875, #c2743c);
  --fab-fg: #26160c;
  --fab-shadow: 0 16px 34px -12px rgba(213, 128, 63, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  --fab-shadow-h: 0 22px 42px -12px rgba(213, 128, 63, 0.75);
}

/* ═══════════════════════════════════════════════════════════════
   الثيم ٢ — Ivory + Deep Navy + Antique Gold (فاتح)
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* الأسطح (60%) */
  --bg-app:      #f4f1e9;
  --bg-surface:  var(--paper-0);
  --bg-subtle:   #efebe1;
  --bg-inverse:  var(--navy-600);

  /* النصوص (30%) */
  --text-primary:   #1e1d18;
  --text-secondary: #4d4a42;
  --text-muted:     #66625a;
  --text-dim:       #8b8579;
  --text-heading:   #14130f;
  --text-on-brand:  #f4f7f4;
  --text-on-accent: var(--paper-0);

  /* اللون الأساسي — كحلي عميق */
  --color-primary:       var(--navy-600);
  --color-primary-hover: var(--navy-500);
  --color-primary-soft:  #e9eef4;

  /* اللون المميز — ذهبي عتيق */
  --color-accent:       var(--gold-600);
  --color-accent-hover: var(--gold-700);
  --color-accent-soft:  #f4eedb;
  --color-accent-text:  #8a7440;
  --text-accent:        #3a5a7c;      /* «أهلاً هديل،» */

  /* الحدود */
  --border-subtle: rgba(30, 29, 24, 0.13);
  --border-default: var(--paper-300);
  --border-accent: rgba(168, 134, 47, 0.55);

  /* الدلالات */
  --color-success: var(--success-500);
  --color-error:   var(--error-500);
  --color-warning: var(--warning-500);

  /* الظلال — أسود دافئ */
  --shadow-xs: 0 1px 2px rgba(74, 62, 40, 0.06);
  --shadow-sm: 0 1px 3px rgba(74, 62, 40, 0.08), 0 1px 2px rgba(74, 62, 40, 0.05);
  --shadow-md: 0 4px 10px rgba(74, 62, 40, 0.10), 0 2px 4px rgba(74, 62, 40, 0.05);
  --shadow-lg: 0 10px 28px rgba(74, 62, 40, 0.13), 0 4px 8px rgba(74, 62, 40, 0.06);
  --shadow-xl: 0 18px 44px rgba(74, 62, 40, 0.16), 0 6px 12px rgba(74, 62, 40, 0.07);
  --shadow-gold: 0 6px 22px rgba(166, 134, 64, 0.20);
  --shadow-focus: 0 0 0 3px rgba(38, 59, 82, 0.20);

  /* الخطوط */
  --font-display: 'Aref Ruqaa', 'Amiri', serif;
  --font-body:    'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  --font-ui:      'Almarai', 'Cairo', sans-serif;

  /* ─── خلفية الشاشات (Splash + المكتبة) ─── */
  --screen-bg:
    radial-gradient(1100px 620px at 78% -8%, rgba(38, 59, 82, 0.10), transparent 60%),
    radial-gradient(900px 700px at 8% 108%, rgba(166, 134, 64, 0.13), transparent 62%),
    linear-gradient(178deg, #f7f4ed 0%, #f4f1e9 46%, #efebe1 100%);
  --pattern: #b49a5e;
  --pattern-op: 0.10;

  /* أسطح */
  --panel: #fffdf8;
  --panel-b: #ded7c8;
  --line: rgba(30, 29, 24, 0.13);
  --hover: rgba(38, 59, 82, 0.05);

  /* الخط الذهبي العتيق الرفيع */
  --rule: rgba(168, 134, 47, 0.55);
  --rule-soft: rgba(168, 134, 47, 0.10);
  --dot: #a8862f;
  --h3: #1d3149;

  /* الخشب والرفّ */
  --wood1: #e2d7c0;
  --wood2: #c9bb9d;
  --wood3: #ad9e80;
  --wood-shadow: rgba(70, 58, 36, 0.45);
  --wood-hi: rgba(38, 59, 82, 0.30);

  /* الكتب */
  --book-shadow: rgba(74, 62, 40, 0.35);
  --book-shadow-2: rgba(74, 62, 40, 0.22);
  --ring: rgba(38, 59, 82, 0.40);
  --spine: rgba(0, 0, 0, 0.42);
  --cover-line: rgba(255, 255, 255, 0.30);

  /* أغلفة افتراضية */
  --cv1: linear-gradient(155deg, #1d5445, #0f3129); --cv1-ink: #e7f2ee;
  --cv2: linear-gradient(160deg, #1e2f4d, #111d31); --cv2-ink: #e3e9f4;
  --cv3: linear-gradient(200deg, #efe7d4, #d7c9a8); --cv3-ink: #4a3826;
  --cv4: linear-gradient(150deg, #2f2a3d, #191623); --cv4-ink: #e6e1ef;
  --cv5: linear-gradient(160deg, #8a4a32, #52281a); --cv5-ink: #f7e6dc;

  /* بطاقة «من دفترك» */
  --note-b: rgba(38, 59, 82, 0.30);
  --note-bg: linear-gradient(150deg, rgba(38, 59, 82, 0.08), rgba(38, 59, 82, 0.02));
  --note-fg: #1e2d3f;
  --note-small: #263b52;

  /* زر «كتاب جديد» */
  --fab-bg: linear-gradient(140deg, #34557c, #1b2b3f);
  --fab-fg: #f4f7f4;
  --fab-shadow: 0 16px 34px -12px rgba(38, 59, 82, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  --fab-shadow-h: 0 22px 42px -12px rgba(38, 59, 82, 0.55);
}