/** * Luxury Theme — Dark Mode CSS * يُطبَّق عند: [data-theme="dark"] على أو * CSS Variables الداكنة تُحقنها ThemeManager في :root عند تفعيل dark mode. * هذا الملف يُعالج أي أنماط بنيوية لا تعتمد على CSS Variables. * ───────────────────────────────────────────────────────────────────────── */ /* ══ Dark toggle transition ══ */ html, body { transition: background-color .35s ease, color .35s ease; } *, *::before, *::after { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* استثناء: حركات CSS المعتمدة على transition أخرى تبقى كما هي */ img, video, canvas, svg, input[type="range"] { transition: none; } /* ══ Dark Mode الأساسي ══ */ [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] body { background-color: var(--bg-page, #0f0d14); color: var(--text-b, #c5bedd); } /* ══ Cards في الوضع الداكن ══ */ [data-theme="dark"] .product-card, [data-theme="dark"] .luxe-card, [data-theme="dark"] .card { background: var(--bg-card, #1a1626); border-color: var(--border, #2d2740); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .product-card:hover, [data-theme="dark"] .luxe-card:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); border-color: var(--brand-primary, #9b7fd4); } /* ══ هيدر في الوضع الداكن ══ */ [data-theme="dark"] .luxe-header, [data-theme="dark"] .site-header { background: var(--bg-card, #1a1626); border-bottom-color: var(--border, #2d2740); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); } /* ══ Footer في الوضع الداكن ══ */ [data-theme="dark"] .site-footer, [data-theme="dark"] .luxe-footer { background: var(--bg-soft, #221e2f); border-top-color: var(--border, #2d2740); } /* ══ أزرار في الوضع الداكن ══ */ [data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline-brand { background: var(--bg-soft, #221e2f); border-color: var(--border, #2d2740); color: var(--brand-primary, #9b7fd4); } /* ══ Inputs في الوضع الداكن ══ */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--bg-soft, #221e2f); border-color: var(--border, #2d2740); color: var(--text-b, #c5bedd); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--brand-primary, #9b7fd4); box-shadow: 0 0 0 3px var(--brand-primary-mist, rgba(93,74,126,.18)); background: var(--bg-card, #1a1626); } /* ══ Text ══ */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text-h, #f0ecfa); } /* ══ Overlays / Modals ══ */ [data-theme="dark"] .modal-backdrop, [data-theme="dark"] .overlay { background: rgba(0, 0, 0, 0.7); } [data-theme="dark"] .modal-content, [data-theme="dark"] .drawer-content { background: var(--bg-card, #1a1626); border-color: var(--border, #2d2740); color: var(--text-b, #c5bedd); } /* ══ Dividers ══ */ [data-theme="dark"] hr, [data-theme="dark"] .divider { border-color: var(--border, #2d2740); } /* ══ Badge في الوضع الداكن ══ */ [data-theme="dark"] .badge { background: var(--brand-primary-mist, rgba(93,74,126,.18)); color: var(--brand-primary, #9b7fd4); } /* ══ زر تبديل Dark Mode ══ */ .dark-mode-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border, #EBE4F2); background: var(--bg-soft, #FFFFFF); color: var(--text-b, #4A3F58); cursor: pointer; font-size: 13px; transition: all .25s; } .dark-mode-toggle:hover { background: var(--brand-primary-mist, #F4EFFA); border-color: var(--brand-primary, #5D4A7E); } /* Moon icon يتغير حسب الوضع */ .dark-mode-toggle .icon-sun { display: none; } .dark-mode-toggle .icon-moon { display: inline; } [data-theme="dark"] .dark-mode-toggle .icon-sun { display: inline; } [data-theme="dark"] .dark-mode-toggle .icon-moon { display: none; } /* ══ Images — تخفيف السطوع قليلاً ══ */ [data-theme="dark"] img:not([src*=".svg"]):not(.no-dim) { filter: brightness(0.90); } /* ══ Scrollbar داكن ══ */ [data-theme="dark"]::-webkit-scrollbar-track { background: var(--bg-soft, #221e2f); } [data-theme="dark"]::-webkit-scrollbar-thumb { background: var(--border-strong, #3d3558); } [data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: var(--brand-primary, #9b7fd4); }