/* ══════════════════════════════════════════════════════════════
   CSS ПЕРЕМЕННЫЕ И ТЕМЫ
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg: #070b14;
  --surface: #0d1526;
  --surface2: #111d35;
  --border: rgba(255,255,255,0.08);
  --accent: #5b6ef5;
  --accent-rgb: 91, 110, 245;
  --accent2: #7c3aed;
  --accent2-rgb: 124, 58, 237;
  --accent3: #06d6a0;
  --accent3-rgb: 6, 214, 160;
  --text: #e8eaf6;
  --muted: #8892b0;
  --white: #ffffff;
  --grad: linear-gradient(135deg, #5b6ef5 0%, #7c3aed 100%);
  --grad2: linear-gradient(135deg, #06d6a0 0%, #5b6ef5 100%);
  --shadow: 0 20px 60px rgba(0,0,0,0.5);
  --r: 16px;
  --r-sm: 10px;

  /* ─ Semantic color tokens ─ */
  --accent-soft: #818cf8;      /* accent tint for text/icons */
  --warn: #f59e0b;             /* amber / warning */
  --danger: #ef4444;           /* red / error */
  --success: #06d6a0;          /* alias for accent3 */
  --tg-blue: #5b9bd5;          /* telegram UI chrome */

  /* ─ Glass / overlay tokens ─ */
  --glass-bg:     rgba(255,255,255,0.04);
  --glass-bg-lg:  rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.10);

  /* ─ Viz tokens (темные в темной теме) ─ */
  --viz-bg:      #0f0f23;
  --viz-surface: #1a1a30;
  --viz-border:  #2a2a3a;
  --viz-border2: #1e1e36;

  /* ─ iPhone bezel tokens ─ */
  --iphone-bg:  #0d1526;
  --iphone-btn: #1e2450;

  /* ─ Telegram UI tokens ─ */
  --tg-bg:        #17212b;
  --tg-surface:   #111d35;
  --tg-chat-bg:   #0e1621;
  --tg-input-bg:  #0d1526;
  --tg-msg-in:    #111d35;
  --tg-msg-out:   #20345c;
  --tg-text-in:   #e8eaf6;

  /* ─ Nav overlay ─ */
  --nav-bg:  rgba(7,11,20,0.2);
  --menu-bg: rgba(7,11,20,0.98);
}

/* ══════════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА
   ══════════════════════════════════════════════════════════════ */

html.light {
  /* Теплые кремовые оттенки */
  --bg:        #fafaf9;
  --surface:   #ffffff;
  --surface2:  #f5f5f4;
  
  /* Контрастный текст */
  --text:      #1c1917;
  --muted:     #78716c;
  --white:     #0c0a09;
  
  /* Нейтральные тени */
  --shadow:    0 1px 3px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.07);
  
  /* Четкие границы */
  --border:    rgba(0,0,0,0.08);
  
  /* Accent остается */
  --accent-soft: #5b6ef5;
  
  /* Glass эффекты */
  --glass-bg:     rgba(0,0,0,0.02);
  --glass-bg-lg:  rgba(0,0,0,0.04);
  --glass-border: rgba(0,0,0,0.06);
  
  /* Навигация */
  --nav-bg:      rgba(250,250,249,0.92);
  --menu-bg:     rgba(250,250,249,0.98);
  --menu-link:   #1c1917;
  --menu-divider: rgba(0,0,0,0.06);
  
  /* iPhone */
  --iphone-bg:  #f5f5f4;
  --iphone-btn: #d6d3d1;
}

html.light body { background: var(--bg); color: var(--text); }

/* ── Навигация ── */
html.light nav { background: var(--nav-bg); }
html.light .nav-links a:hover { color: var(--accent); }
html.light .nav-links.open { background: var(--menu-bg); }
html.light .nav-links.open li a { color: var(--text); }

/* ── Логотипы ── */
html.light .logo-brand       { color: rgba(0,0,0,0.3); }
html.light .logo-brand:hover { color: rgba(0,0,0,0.6); }
html.light .logo-img { filter: grayscale(100%) brightness(0.5); }
html.light .logo-img-wrap:hover .logo-img { filter: grayscale(0%) brightness(0.9); }

/* ── Grid overlay ── */
html.light .grid-overlay {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}

/* ── Hero bg ── */
html.light .hero-bg::before {
  background: radial-gradient(ellipse at center, rgba(245,158,11,0.08) 0%, transparent 65%);
}
html.light .hero-bg::after {
  background: radial-gradient(ellipse, rgba(var(--accent2-rgb),  0.06) 0%, transparent 65%);
}

/* ── Dashboard card ── */
html.light .dashboard-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 
    0 0 0 1px rgba(0,0,0,0.02),
    0 2px 4px rgba(0,0,0,0.04),
    0 20px 50px rgba(0,0,0,0.08);
}
html.light .db-table td {
  border-top-color: rgba(0,0,0,0.07);
}
html.light .metric-card { border-color: rgba(var(--accent-rgb), 0.1); }

/* ── Float badges ── */
html.light .float-badge {
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.06),
    0 8px 28px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.08);
}

/* ── Cards hover shadow ── */
html.light .card:hover,
html.light .why-tg-card:hover,
html.light .audience-card:hover {
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.06), 
    0 16px 48px rgba(0,0,0,0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
}
html.light .case-card:hover {
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.06), 
    0 16px 40px rgba(0,0,0,0.07);
  border-color: rgba(var(--accent-rgb), 0.2);
}

/* ── Results section ── */
html.light .results-section {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent2-rgb), 0.08));
}
html.light .result-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
html.light .result-card:hover {
  background: #ffffff;
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ── Payment flow steps ── */
html.light .flow-step { background: var(--surface2); }

/* ── Antifrod ── */
html.light .antifrod-item {
  background: rgba(0,0,0,0.025);
}

/* ── API code block ── */
html.light .api-code {
  background: var(--surface2);
  border-color: rgba(var(--accent3-rgb), 0.25);
}

/* ── CTA input ── */
html.light .cta-input {
  color: var(--white);
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}
html.light .cta-section::before {
  background: radial-gradient(ellipse, rgba(245,158,11,0.1) 0%, rgba(var(--accent-rgb), 0.05) 50%, transparent 70%);
}

/* ── Network map nodes ── */
html.light .viz-net-node .viz-net-inner {
  background: rgba(255,255,255,0.85);
  border-color: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.08);
}
html.light .viz-net-tooltip {
  background: rgba(255,255,255,0.96);
  border-color: var(--border);
  color: var(--white);
}
html.light .viz-orbit-item {
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.1);
}
html.light .viz-node {
  background: rgba(255,255,255,0.85);
}

/* ── Viz элементы в светлой теме ── */
html.light .viz-webapp,
html.light .viz-dashboard {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 
    0 0 0 1px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.08),
    0 20px 60px rgba(0,0,0,0.12);
}

html.light .viz-webapp-header,
html.light .viz-dash-header {
  border-bottom-color: rgba(0,0,0,0.08);
  background: var(--surface2);
}

html.light .viz-webapp-search,
html.light .viz-product-card,
html.light .viz-dash-welcome,
html.light .viz-dash-stat,
html.light .viz-dash-action-chip {
  background: var(--surface2);
  border-color: rgba(0,0,0,0.06);
}

html.light .viz-product-img {
  background: linear-gradient(135deg, var(--surface2), var(--bg));
}

html.light .viz-webapp-footer,
html.light .viz-dash-nav {
  border-top-color: rgba(0,0,0,0.08);
  background: var(--surface2);
}

html.light .viz-product-name,
html.light .viz-webapp-header span,
html.light .viz-webapp-footer-text,
html.light .viz-dash-header,
html.light .viz-dash-welcome h5,
html.light .viz-dash-stat-val {
  color: var(--white);
}

html.light .viz-product-price,
html.light .viz-webapp-footer-price,
html.light .viz-product-btn {
  background: var(--accent3);
}

html.light .viz-phone {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
}

html.light .viz-phone-screen {
  background: linear-gradient(180deg, var(--surface2), var(--bg));
}

/* ── Viz tokens в светлой теме ── */
html.light {
  --viz-bg:      #ffffff;
  --viz-surface: #f5f5f4;
  --viz-border:  rgba(0,0,0,0.08);
  --viz-border2: rgba(0,0,0,0.06);
}

/* ── Light theme: Phone bezel ── */
html.light .iphone-bezel {
  border-color: rgba(0,0,0,0.12);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.08),
    0 0 0 2.5px rgba(200,200,206,0.9),
    0 0 0 3.5px rgba(180,180,188,0.7),
    0 32px 80px rgba(var(--accent-rgb), 0.15),
    0 8px 24px rgba(0,0,0,0.1),
    inset 0 0 2px rgba(255,255,255,0.8);
}
html.light .iphone-statusbar { color: #1a1a1e; }
html.light .iphone-home-indicator { background: rgba(0,0,0,0.2); }
html.light .dynamic-island { background: #1a1a1e; }

/* ── Telegram UI в светлой теме ── */
html.light .tg-phone {
  background: #f5f5f7;
}
html.light .tg-header {
  background: #ffffff;
  border-bottom-color: rgba(0,0,0,0.08);
}
html.light .tg-hname {
  color: #1a1a1e;
}
html.light .tg-body {
  background: #f5f5f4;
}
html.light .tg-msg-bot {
  background: #ffffff;
  color: #1c1917;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
html.light .tg-msg-user {
  background: #5b6ef5;
  color: #ffffff;
}
html.light .tg-input-bar {
  background: #ffffff;
  border-top-color: rgba(0,0,0,0.08);
}
html.light .tg-input-field {
  background: #fafaf9;
  color: #78716c;
}

html.light .tg-typing {
  background: #e5e7eb;
}

html.light .tg-typing span {
  background: #78716c;
}

/* ── Gradient text ── */
html.light .gradient-text {
  background: linear-gradient(135deg, #4f46e5 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── API code блок остается темным ── */
html.light .api-code {
  background: #0d1526;
  color: #06d6a0;
  border-color: rgba(var(--accent3-rgb), 0.25);
}