/* Talosion — светлая тема по умолчанию, тёмная по переключателю */

:root,
html[data-theme="light"] {
  --bg-dark: #f0f4fb;
  --bg-darker: #ffffff;
  --accent-blue: #0077cc;
  --accent-cyan: #00a8b8;
  --text-light: #1a1d2e;
  --text-muted: #3d4255;
  --border-color: rgba(0, 120, 160, 0.18);
  --card-bg: rgba(255, 255, 255, 0.95);
  --error-color: #e03e4a;
  --error-bg: rgba(224, 62, 74, 0.08);
  --header-bg: rgba(255, 255, 255, 0.92);
  --hero-overlay: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(240, 244, 251, 0.88) 70%);
  --hero-grid-stroke: rgba(0, 140, 180, 0.12);
  --modal-overlay: rgba(26, 32, 48, 0.45);
  --modal-bg: #ffffff;
  --input-bg: #f8fafc;
  --input-border: rgba(0, 120, 160, 0.25);
  --shadow-soft: 0 10px 30px rgba(26, 40, 80, 0.08);
  --shadow-card: 0 12px 28px rgba(26, 40, 80, 0.1);
  --serenity-bg: #f0f4fb;
  --serenity-title: #1a1d2e;
  --serenity-text: var(--text-muted);
  --video-wrap-bg: #ffffff;
  --cta-text-on-accent: #ffffff;
  --color-success: #0a8f5c;
  --color-danger: #c93c3c;
  --color-warning: #9a7200;
  --text-subtle: var(--text-muted);
}

html[data-theme="dark"] {
  --bg-dark: #0d0d1a;
  --bg-darker: #080810;
  --accent-blue: #00aaff;
  --accent-cyan: #00fff2;
  --text-light: #e0e0e0;
  --text-muted: #888899;
  --border-color: rgba(0, 255, 242, 0.15);
  --card-bg: rgba(29, 29, 45, 0.5);
  --error-color: #ff4757;
  --error-bg: rgba(255, 71, 87, 0.1);
  --header-bg: rgba(13, 13, 26, 0.8);
  --hero-overlay: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 70%);
  --hero-grid-stroke: rgba(0, 255, 242, 0.1);
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-bg: var(--bg-darker);
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-border: var(--border-color);
  --shadow-soft: 0 10px 20px rgba(0, 170, 255, 0.3);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.3);
  --serenity-bg: #151521;
  --serenity-title: #ffffff;
  --serenity-text: #a2a3b7;
  --video-wrap-bg: #0a0a14;
  --cta-text-on-accent: var(--bg-dark);
  --color-success: #00ff8c;
  --color-danger: #ff4d4d;
  --color-warning: #ffc700;
  --text-subtle: rgba(255, 255, 255, 0.7);
}

/* Вторичный текст (вместо inline rgba(255,255,255,0.7) на светлом фоне) */
.talosion-text-subtle {
  color: var(--text-subtle);
}

/* === Переключатель темы === */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  transform: translateY(-1px);
}

.theme-toggle i {
  font-size: 1.1rem;
  line-height: 1;
}

html[data-theme="light"] .theme-toggle .theme-icon-sun {
  display: none;
}

html[data-theme="light"] .theme-toggle .theme-icon-moon {
  display: inline-block;
}

html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: inline-block;
}

/* === Компоненты через переменные === */
header {
  background: var(--header-bg);
}

.header-actions .demo-btn:hover {
  color: var(--cta-text-on-accent);
}

.header-actions .login-btn {
  color: var(--cta-text-on-accent);
}

.cabinet-btn {
  color: var(--cta-text-on-accent);
}

.cta-btn {
  color: var(--cta-text-on-accent);
}

.hero-video-bg .hero-video-overlay {
  background: var(--hero-overlay);
}

.hero {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,140,180,0.12)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}

html[data-theme="dark"] .hero {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,255,242,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}

html[data-theme="light"] .hero h1 {
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .logo-icon {
  color: #1e3a5f;
}

.serenity-section-dark {
  background-color: var(--serenity-bg);
  color: var(--serenity-text);
}

.serenity-title {
  color: var(--serenity-title);
}

.serenity-subtitle {
  color: var(--serenity-text);
}

/* Светлая тема: чередование фона, чтобы секции не сливались */
html[data-theme="light"] .serenity-section-dark {
  background: var(--serenity-bg);
  border-bottom: 1px solid var(--border-color);
}

html[data-theme="light"] .author-video-section {
  background: var(--bg-darker);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

html[data-theme="light"] .where-to-buy-section {
  background: var(--bg-dark);
  border-top: 1px solid var(--border-color);
}

html[data-theme="light"] .version-news-section {
  background: var(--bg-darker);
  border-top: 1px solid var(--border-color);
}

html[data-theme="light"] .serenity-background {
  opacity: 0.45;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0, 120, 180, 0.07) 0%, transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(0, 150, 130, 0.05) 0%, transparent 38%);
}

html[data-theme="light"] .new-reviews-section {
  background: linear-gradient(180deg, rgba(0, 168, 184, 0.06) 0%, var(--bg-dark) 100%);
}

html[data-theme="light"] .author-video-wrap {
  border-color: rgba(0, 120, 160, 0.22);
  box-shadow: var(--shadow-card);
}

html[data-theme="light"] .author-video-player {
  background: #dfe6f0;
}

/* Тёмная тема: мягкие переходы без резких скачков */
html[data-theme="dark"] .author-video-section {
  background: linear-gradient(180deg, #151521 0%, var(--bg-dark) 100%);
}

html[data-theme="dark"] .where-to-buy-section,
html[data-theme="dark"] .version-news-section {
  background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(8, 8, 16, 0.98) 100%);
}

.modal {
  background-color: var(--modal-overlay);
}

.modal-content {
  background: var(--modal-bg);
  box-shadow: var(--shadow-card);
}

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-light);
}

.mobile-menu {
  box-shadow: var(--shadow-soft);
}

.price-card,
.buy-card,
.tower-card,
.feature-card,
.review-card {
  box-shadow: var(--shadow-card);
}

html[data-theme="light"] .price-card.featured {
  box-shadow: 0 12px 32px rgba(0, 120, 180, 0.15);
}

html[data-theme="light"] .notification-banner.success {
  background: rgba(0, 180, 120, 0.12);
  color: #0d5c3d;
}

html[data-theme="light"] .notification-banner.error {
  background: rgba(224, 62, 74, 0.1);
  color: #8b1e28;
}