/* LumFoto — тёмная и светлая тема (data-theme на ) */ [data-theme="dark"] { color-scheme: dark; --bg: #07010f; --surface: rgba(255, 255, 255, 0.06); --surface-hover: rgba(255, 255, 255, 0.09); --surface-elevated: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.14); --text: #f4f6fc; --muted: #b4bbd0; --lead: #c8cede; --cyan: #37e7ff; --pink: #ff38b0; --violet: #8f5cff; --accent: var(--cyan); --on-gradient: #090313; --gradient: linear-gradient(135deg, var(--pink), var(--violet) 55%, var(--cyan)); --shadow-btn: 0 10px 32px rgba(143, 92, 255, 0.22); --shadow-btn-active: 0 14px 36px rgba(143, 92, 255, 0.28); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.06) inset; --ambient-a: rgba(143, 92, 255, 0.18); --ambient-b: rgba(55, 231, 255, 0.12); --ambient-c: rgba(255, 56, 176, 0.14); --status-ready-color: var(--cyan); --status-ready-bg: rgba(55, 231, 255, 0.08); --status-ready-border: rgba(55, 231, 255, 0.35); --status-error-color: #f87171; --status-error-border: rgba(248, 113, 113, 0.25); --drop-focus-border: rgba(55, 231, 255, 0.5); --drop-focus-shadow: rgba(55, 231, 255, 0.1); --test-banner-bg: rgba(55, 231, 255, 0.1); --test-banner-border: rgba(55, 231, 255, 0.3); --error-bg: rgba(248, 113, 113, 0.12); --error-border: rgba(248, 113, 113, 0.35); --error-text: #fca5a5; --frame-img-bg: #000; --effect-btn-border: rgba(255, 255, 255, 0.1); --effect-selected-border: rgba(255, 255, 255, 0.28); --effect-hover-border: rgba(255, 255, 255, 0.2); --toggle-bg: var(--surface); --toggle-border: var(--border); --theme-color-meta: #07010f; } [data-theme="light"] { color-scheme: light; --bg: #f3f5fb; --surface: #ffffff; --surface-hover: #f6f8fc; --surface-elevated: #ffffff; --border: rgba(15, 20, 32, 0.1); --shadow-card: 0 1px 2px rgba(15, 20, 32, 0.06), 0 8px 24px rgba(15, 20, 32, 0.04); --text: #0f1420; --muted: #5c667a; --lead: #3d4656; --cyan: #0088a8; --pink: #d92a9a; --violet: #6a3de8; --accent: var(--cyan); --on-gradient: #ffffff; --gradient: linear-gradient(135deg, #e835a8, #7b4df0 55%, #00a8c8); --shadow-btn: 0 12px 28px rgba(106, 61, 232, 0.2); --shadow-btn-active: 0 14px 32px rgba(106, 61, 232, 0.26); --ambient-a: rgba(123, 77, 240, 0.1); --ambient-b: rgba(0, 168, 200, 0.08); --ambient-c: rgba(232, 53, 168, 0.07); --status-ready-color: #0088a8; --status-ready-bg: rgba(0, 136, 168, 0.1); --status-ready-border: rgba(0, 136, 168, 0.35); --status-error-color: #dc2626; --status-error-border: rgba(220, 38, 38, 0.28); --drop-focus-border: rgba(0, 136, 168, 0.45); --drop-focus-shadow: rgba(0, 136, 168, 0.12); --test-banner-bg: rgba(0, 136, 168, 0.08); --test-banner-border: rgba(0, 136, 168, 0.28); --error-bg: rgba(220, 38, 38, 0.08); --error-border: rgba(220, 38, 38, 0.28); --error-text: #b91c1c; --frame-img-bg: #e4e9f2; --effect-btn-border: rgba(18, 24, 42, 0.08); --effect-selected-border: rgba(106, 61, 232, 0.35); --effect-hover-border: rgba(18, 24, 42, 0.18); --toggle-bg: #ffffff; --toggle-border: rgba(18, 24, 42, 0.14); --theme-color-meta: #f3f5fb; } /* Переключатель темы (главная + юр. страницы) */ .top-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--toggle-border); border-radius: 12px; background: var(--toggle-bg); color: var(--text); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s; } .theme-toggle:hover { border-color: var(--cyan); background: var(--surface-hover); } .theme-toggle:active { transform: scale(0.96); } .theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle__sun, .theme-toggle__moon { grid-area: 1 / 1; transition: opacity 0.2s, transform 0.2s; } [data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: scale(1); } [data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: scale(0.6); } [data-theme="light"] .theme-toggle__sun { opacity: 0; transform: scale(0.6); } [data-theme="light"] .theme-toggle__moon { opacity: 1; transform: scale(1); }