/* ==========================================================================
   ЭтоЯTV — токены темы «Эфир»

   Единственное место, где живут переменные новой темы. Подключается перед
   theme_modern.css (основной сайт) и перед panel_modern.css (панель
   управления и эфирная студия), потому что у панели свой каркас страницы
   и она не тянет стили основного сайта.

   Раньше набор переменных был скопирован в оба файла и разъехался: сайт уже
   жил на новой палитре, а панель осталась на старой. Общий файл убирает эту
   возможность.
   ========================================================================== */

.theme_modern {
  /* Поверхности: студийная темнота с синим подтоном */
  --bg: #0a0e14;
  --bg-deep: #070a0f;
  --bg-elevated: #0e141d;
  --surface: #111823;
  --surface-2: #16202d;
  --surface-3: #1d2938;
  --border: #1e2b3a;
  --border-strong: #2b3c50;

  /* Текст */
  --text: #e9f1f8;
  --text-strong: #ffffff;
  --muted: #93a5b8;
  --muted-dim: #6d7f92;

  /* Акценты: бирюза из старой темы + эфирный синий */
  --accent: #6fdeee;
  --accent-hover: #a7ecf7;
  --accent-deep: #2b8fd6;
  --accent-dim: rgba(111, 222, 238, 0.12);
  --accent-line: rgba(111, 222, 238, 0.35);
  --accent-glow: rgba(111, 222, 238, 0.28);

  /* Тёплый оранжевый — второй фирменный цвет ЭтоЯTV, контраст к студийному синему */
  --brand: #f2891f;
  --brand-hover: #ff9d3c;
  --brand-glow: rgba(242, 137, 31, 0.3);

  /* Стекло и объём: карточки не плоские заливки, а поверхности со светом сверху */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 42%), var(--surface);
  --glass-2: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 46%), var(--surface-2);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Состояния эфира */
  --live: #ff4d5a;
  --autopilot: #2fbf5f;
  --premium: #f0b429;
  --danger: #ff6b6b;
  --success: #4ade80;
  --warning: #fbbf24;

  /* Форма */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 3px var(--accent-dim);

  /* Сетка */
  --container: 1240px;
  --gap: 22px;
  --pad: 20px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Движение: короткие эфирные интервалы (120–260ms). Без bounce —
     реакция на наведение, не рекламный overshoot. Сайт, панель и плеер
     берут одни длительности, иначе ховеры дышат в разном темпе. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* Иконки темы живут рядом со своим использованием, но эти нужны и сайту,
     и панели (поиск в архиве, юзербар, предпросмотр оверлея), поэтому
     объявлены здесь — единственном файле, который подключают оба каркаса */
  --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.8 10-6.8S22 12 22 12s-3.6 6.8-10 6.8S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E");
  --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 19.2c.8-3.3 3.6-5.2 7-5.2s6.2 1.9 7 5.2'/%3E%3C/svg%3E");
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M3 12h2M19 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4'/%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 14.3A8.5 8.5 0 1 1 9.7 3 7 7 0 0 0 21 14.3z'/%3E%3C/svg%3E");

  /* Текст на заливке акцента; шапка, вуаль канала, промо — иначе светлая тема
     не может перекрасить захардкоженные rgba(#0a0e14) */
  --on-accent: #05222a;
  --header-bg: rgba(10, 14, 20, 0.82);
  --veil: rgba(10, 14, 20, 0.58);
  --promo-from: #0b1728;
  --promo-mid: #081120;
  --promo-vignette: rgba(3, 6, 11, 0.48);
  --logo-filter: none;
}

/* Светлая палитра «Эфира». Бумага, не снег: без #fff и без холодного
   зелёно-голубого. Текст — тёплый графит средней контрастности, чтобы
   не «резал» глаза на кремовом фоне (не почти-чёрный #1a2330). --dur /
   --ease / --danger наследуются. */
html[data-scheme="light"] .theme_modern {
  --bg: #ece8e2;
  --bg-deep: #e3ddd6;
  --bg-elevated: #f3f0eb;
  --surface: #f4f1ec;
  --surface-2: #ebe6df;
  --surface-3: #e2dbd3;
  --border: #d4cdc4;
  --border-strong: #bdb4a9;

  --text: #514c46;
  --text-strong: #3c3833;
  --muted: #736c64;
  --muted-dim: #948c83;

  --accent: #1a6f80;
  --accent-hover: #155f6e;
  --accent-deep: #1a6aa8;
  --accent-dim: rgba(26, 111, 128, 0.12);
  --accent-line: rgba(26, 111, 128, 0.36);
  --accent-glow: rgba(26, 111, 128, 0.18);

  --brand: #d56e10;
  --brand-hover: #c05f0a;
  --brand-glow: rgba(213, 110, 16, 0.22);

  --glass: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 42%), var(--surface);
  --glass-2: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%), var(--surface-2);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .45);

  --shadow-1: 0 1px 2px rgba(26, 35, 48, 0.08);
  --shadow-2: 0 10px 28px rgba(26, 35, 48, 0.10);
  --ring: 0 0 0 3px var(--accent-dim);

  --on-accent: #ffffff;
  --header-bg: rgba(243, 240, 235, 0.92);
  --veil: rgba(236, 232, 226, 0.92);
  --promo-from: #0b1728;
  --promo-mid: #081120;
  --promo-vignette: rgba(3, 6, 11, 0.48);
  --logo-filter: none;
}

html[data-scheme="dark"] { color-scheme: dark; background-color: #0a0e14; }
html[data-scheme="light"] { color-scheme: light; background-color: #ece8e2; }

body.theme_modern,
body.theme_modern #header,
body.theme_modern .userbar,
body.theme_modern .sidebar,
body.theme_modern .panel-container,
body.theme_modern .main-content,
body.theme_modern .content-wrapper,
body.theme_modern .studio-container,
body.theme_modern .studio-header,
body.theme_modern .studio-workspace {
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  body.theme_modern,
  body.theme_modern #header,
  body.theme_modern .userbar,
  body.theme_modern .sidebar,
  body.theme_modern .panel-container,
  body.theme_modern .main-content,
  body.theme_modern .content-wrapper,
  body.theme_modern .studio-container,
  body.theme_modern .studio-header,
  body.theme_modern .studio-workspace {
    transition: none;
  }
}

/* Тумблер светлой/тёмной палитры: шапка, сайдбар панели, студия */
.theme_modern .scheme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  vertical-align: middle;
  position: relative;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.theme_modern .scheme-toggle:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
  background: var(--surface-3);
}

.theme_modern .scheme-toggle__icon {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur) var(--ease);
}

.theme_modern .scheme-toggle__sun { --icon: var(--icon-sun); }
.theme_modern .scheme-toggle__moon { --icon: var(--icon-moon); }

html[data-scheme="light"] .theme_modern .scheme-toggle__sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
  position: absolute;
  pointer-events: none;
}

html:not([data-scheme="light"]) .theme_modern .scheme-toggle__moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
  position: absolute;
  pointer-events: none;
}

.theme_modern .logotype-img {
  transition: opacity var(--dur) var(--ease);
}

.theme_modern .user-info .scheme-toggle {
  width: 28px;
  height: 28px;
  margin: 0 6px 0 2px;
}

.theme_modern button.scheme-toggle {
  height: 34px;
  width: 34px;
  min-height: 0;
  padding: 0;
  gap: 0;
  box-shadow: none;
  font: inherit;
}

.theme_modern .user-info button.scheme-toggle {
  width: 28px;
  height: 28px;
}

.theme_modern .studio-header-right .scheme-toggle {
  margin-right: 4px;
}

/* Светлый логотип без SVG-glow: пара файлов, CSS прячет лишний */
.theme_modern .logotype-img--light { display: none !important; }
html[data-scheme="light"] .theme_modern .logotype-img--dark { display: none !important; }
html[data-scheme="light"] .theme_modern .logotype-img--light { display: block !important; }