/* ========================================================================== Theme System — charity platform 4 themes (default / ocean / warm / minimal) × 2 modes (light / dark) Controlled via [data-theme] and [data-mode] on . Every component stylesheet in this project reads colors from these custom properties — switching the two attributes re-skins the whole app. ========================================================================== */ /* ---------- mode-only tokens (shared across all themes) ---------- */ :root, html[data-mode="light"] { --nav-bg: rgba(255, 255, 255, .82); --overlay: rgba(15, 20, 18, .55); --shadow-sm: 0 2px 8px rgba(20, 20, 20, .06); --shadow-md: 0 8px 24px rgba(20, 20, 20, .08); --shadow-lg: 0 16px 40px rgba(20, 20, 20, .12); --surface-2: rgba(0, 0, 0, .025); color-scheme: light; } html[data-mode="dark"] { --nav-bg: rgba(18, 20, 19, .78); --overlay: rgba(0, 0, 0, .65); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35); --shadow-md: 0 10px 28px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55); --surface-2: rgba(255, 255, 255, .04); color-scheme: dark; } /* ---------- DEFAULT (سبز / هویت اصلی خیریه) ---------- */ :root, html[data-theme="default"], html:not([data-theme]) { --primary: #1A6B4A; --primary-lt: #E8F5EE; --primary-dk: #155A3E; --accent: #D4A853; --accent-lt: #FDF6E7; --text: #1C1C1E; --muted: #6B7280; --surface: #FFFFFF; --border: #E5E7EB; --error: #DC2626; --warning: #B45309; --success: #16A34A; --bg: #F7FAF8; --on-primary: #fff; --on-accent: #fff; } html[data-theme="default"][data-mode="dark"], html:not([data-theme])[data-mode="dark"] { --primary: #34C98B; --primary-lt: #15271F; --primary-dk: #6BE0AC; --accent: #E8C173; --accent-lt: #241E12; --text: #ECF5F0; --muted: #93AA9F; --surface: #161F1B; --border: #263129; --error: #F87171; --warning: #F5A524; --success: #4ADE80; --bg: #0E1512; --on-primary: #fff; --on-accent: #fff; } /* ---------- OCEAN ---------- */ html[data-theme="ocean"] { --primary: #0E6BA8; --primary-lt: #E3F1F8; --primary-dk: #094B78; --accent: #7FC6D9; --accent-lt: #EAF7FA; --text: #0F2A3A; --muted: #5B7A8A; --surface: #FFFFFF; --border: #DCEAF0; --error: #DC2626; --warning: #B45309; --success: #16A34A; --bg: #F4FAFC; --on-primary: #fff; --on-accent: #fff; } html[data-theme="ocean"][data-mode="dark"] { --primary: #4FB3E0; --primary-lt: #112733; --primary-dk: #83CEEE; --accent: #8FD4E6; --accent-lt: #102A33; --text: #E7F4F9; --muted: #86AAB8; --surface: #0E2029; --border: #1C3946; --error: #F87171; --warning: #F5A524; --success: #4ADE80; --bg: #081821; --on-primary: #fff; --on-accent: #fff; } /* ---------- WARM ---------- */ html[data-theme="warm"] { --primary: #B4522F; --primary-lt: #FBE7DE; --primary-dk: #8F3F22; --accent: #E8A33D; --accent-lt: #FDF1DD; --text: #3B2A22; --muted: #8A7264; --surface: #FFFFFF; --border: #EFE1D4; --error: #DC2626; --warning: #B45309; --success: #16A34A; --bg: #FBF6EF; --on-primary: #fff; --on-accent: #fff; } html[data-theme="warm"][data-mode="dark"] { --primary: #E0764C; --primary-lt: #2E1D12; --primary-dk: #F0996B; --accent: #F0B75E; --accent-lt: #2E2211; --text: #F5E9DC; --muted: #BCA08D; --surface: #1E140D; --border: #392A1D; --error: #F87171; --warning: #F5A524; --success: #4ADE80; --bg: #170F09; --on-primary: #fff; --on-accent: #fff; } /* ---------- MINIMAL ---------- */ html[data-theme="minimal"] { --primary: #2B2B2B; --primary-lt: #F0F0F0; --primary-dk: #000000; --accent: #8A8A8A; --accent-lt: #F5F5F5; --text: #1A1A1A; --muted: #767676; --surface: #FFFFFF; --border: #E2E2E2; --error: #B3261E; --warning: #B45309; --success: #16A34A; --bg: #FFFFFF; --on-primary: #fff; --on-accent: #fff; } html[data-theme="minimal"][data-mode="dark"] { --primary: #EDEDED; --primary-lt: #262626; --primary-dk: #FFFFFF; --accent: #A3A3A3; --accent-lt: #232323; --text: #F2F2F2; --muted: #A0A0A0; --surface: #191919; --border: #333333; --error: #E5484D; --warning: #F5A524; --success: #4ADE80; --bg: #101010; --on-primary: #101010; --on-accent: #101010; } /* ---------- universal helpers ---------- */ html { transition: background-color .25s ease, color .25s ease; } .theme-toggle-group { display: flex; align-items: center; gap: 8px; } .mode-toggle-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s; flex-shrink: 0; } .mode-toggle-btn:hover { border-color: var(--primary); color: var(--primary); } .mode-toggle-btn svg { width: 18px; height: 18px; } .theme-picker { display: flex; align-items: center; gap: 6px; } .theme-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; background: var(--swatch-color); transition: .15s; } .theme-swatch:hover { transform: scale(1.12); } .theme-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }