/* ============================================================
   THEME SYSTEM — cheat_sheet project
   يُستخدم في جميع الصفحات
============================================================ */

/* ── DARK (ماء — ليلي) ── */
[data-theme="dark"] {
  --bg-base:        #030712;
  --bg-surface:     #111827;
  --bg-card:        #1f2937;
  --bg-card-hover:  #374151;
  --border:         #374151;
  --border-subtle:  #1f2937;
  --text-primary:   #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted:     #6b7280;
  --accent:         #3b82f6;
  --accent-light:   #60a5fa;
  --accent-bg:      rgba(59,130,246,0.12);
  --accent-border:  rgba(59,130,246,0.30);
  --code-bg:        #0d1117;
  --code-border:    #30363d;
  --code-text:      #86efac;
  --header-bg:      linear-gradient(135deg,#1e3a8a,#1d4ed8,#1e3a8a);
  --header-text:    #dbeafe;
  --header-sub:     #93c5fd;
  --badge-bg:       rgba(59,130,246,0.2);
  --badge-text:     #93c5fd;
  --badge-border:   rgba(59,130,246,0.4);
  --scrollbar-track:#111827;
  --scrollbar-thumb:#3b82f6;
  --shadow:         0 4px 24px rgba(0,0,0,0.40);
  --shadow-card:    0 2px 12px rgba(0,0,0,0.30);
  --glow:           0 0 20px rgba(59,130,246,0.35);
  --overlay:        rgba(0,0,0,0.75);
}

/* ── LIGHT (هواء — منعش) ── */
[data-theme="light"] {
  --bg-base:        #f8fafc;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f1f5f9;
  --border:         #e2e8f0;
  --border-subtle:  #f1f5f9;
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --accent:         #10b981;
  --accent-light:   #34d399;
  --accent-bg:      rgba(16,185,129,0.07);
  --accent-border:  rgba(16,185,129,0.20);
  --code-bg:        #1e293b;
  --code-border:    #334155;
  --code-text:      #86efac;
  --header-bg:      linear-gradient(135deg,#ecfdf5,#d1fae5,#ecfdf5);
  --header-text:    #064e3b;
  --header-sub:     #059669;
  --badge-bg:       rgba(16,185,129,0.10);
  --badge-text:     #047857;
  --badge-border:   rgba(16,185,129,0.25);
  --scrollbar-track:#e2e8f0;
  --scrollbar-thumb:#10b981;
  --shadow:         0 4px 24px rgba(0,0,0,0.08);
  --shadow-card:    0 2px 12px rgba(0,0,0,0.06);
  --glow:           0 0 20px rgba(16,185,129,0.15);
  --overlay:        rgba(0,0,0,0.50);
}

/* ── WARM (نار — دافئ) ── */
[data-theme="warm"] {
  --bg-base:        #fffbf5;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #fff7ed;
  --border:         #fed7aa;
  --border-subtle:  #ffedd5;
  --text-primary:   #1c0a00;
  --text-secondary: #92400e;
  --text-muted:     #b45309;
  --accent:         #dc2626;
  --accent-light:   #ef4444;
  --accent-bg:      rgba(220,38,38,0.07);
  --accent-border:  rgba(220,38,38,0.25);
  --code-bg:        #1c1917;
  --code-border:    #44403c;
  --code-text:      #fde68a;
  --header-bg:      linear-gradient(135deg,#fff7ed,#fef3c7,#fee2e2);
  --header-text:    #7f1d1d;
  --header-sub:     #b91c1c;
  --badge-bg:       rgba(220,38,38,0.10);
  --badge-text:     #b91c1c;
  --badge-border:   rgba(220,38,38,0.30);
  --scrollbar-track:#ffedd5;
  --scrollbar-thumb:#dc2626;
  --shadow:         0 4px 24px rgba(220,38,38,0.10);
  --shadow-card:    0 2px 12px rgba(220,38,38,0.07);
  --glow:           0 0 20px rgba(220,38,38,0.20);
  --overlay:        rgba(28,10,0,0.60);
}

/* ── FOREST (أرض — طبيعي: خلفية خضراء هادئة + أكسنت بنّي/برتقالي ترابي) ── */
[data-theme="forest"] {
  --bg-base:        #f0fdf4;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #dcfce7;
  --border:         #bbf7d0;
  --border-subtle:  #dcfce7;
  --text-primary:   #052e16;
  --text-secondary: #166534;
  --text-muted:     #15803d;
  --accent:         #b45309;
  --accent-light:   #d97706;
  --accent-bg:      rgba(180,83,9,0.08);
  --accent-border:  rgba(180,83,9,0.25);
  --code-bg:        #052e16;
  --code-border:    #14532d;
  --code-text:      #86efac;
  --header-bg:      linear-gradient(135deg,#dcfce7,#bbf7d0,#d1fae5);
  --header-text:    #052e16;
  --header-sub:     #92400e;
  --badge-bg:       rgba(180,83,9,0.10);
  --badge-text:     #92400e;
  --badge-border:   rgba(180,83,9,0.30);
  --scrollbar-track:#dcfce7;
  --scrollbar-thumb:#b45309;
  --shadow:         0 4px 24px rgba(180,83,9,0.10);
  --shadow-card:    0 2px 12px rgba(180,83,9,0.07);
  --glow:           0 0 20px rgba(180,83,9,0.20);
  --overlay:        rgba(5,46,22,0.60);
}

/* ============================================================
   TRANSITIONS — كل العناصر تتحول بسلاسة عند تغيير الثيم
============================================================ */
*, *::before, *::after {
  transition:
    background-color 0.3s ease,
    border-color     0.3s ease,
    color            0.3s ease,
    box-shadow       0.3s ease;
}