/* ============================================================================
   Темы сайта: изумрудная (основная — значения из theme.css, здесь не трогаем),
   графит и светлая. <html data-theme="emerald | graphite | light">.
   Только цвета — шрифты, отступы и разметка у всех тем одни и те же.
   Подключается после theme.css/site.css (публичные страницы) и после skin.css (вход, кабинет).
   ========================================================================= */

/* ── Графит: нейтральный тёмный, холодный синий акцент ───────────────────── */
:root[data-theme="graphite"] {
  --b34-bg: #0a0c10;
  --b34-bg-lift: #0d1015;
  --b34-panel: #10131a;
  --b34-panel-2: #151922;
  --b34-inset: #07080b;

  --b34-line: rgba(200, 214, 255, .07);
  --b34-line-2: rgba(200, 214, 255, .12);
  --b34-line-3: rgba(200, 214, 255, .2);

  --b34-text: #eef1f8;
  --b34-text-2: rgba(238, 241, 248, .64);
  --b34-text-3: rgba(238, 241, 248, .4);
  --b34-text-4: rgba(238, 241, 248, .24);

  --b34-ac: #7c9cff;
  --b34-ac-bright: #9db4ff;
  --b34-ac-04: rgba(124, 156, 255, .05);
  --b34-ac-08: rgba(124, 156, 255, .09);
  --b34-ac-12: rgba(124, 156, 255, .14);
  --b34-ac-20: rgba(124, 156, 255, .22);
  --b34-ac-30: rgba(124, 156, 255, .32);
  --b34-ac-50: rgba(124, 156, 255, .52);
  --b34-ac-ink: #0b1230;
  --b34-ac-rgb: 124 156 255;

  --b34-glass: 16 19 26;
  --b34-glass-hi: 21 25 34;
  --b34-glass-nav: 13 16 22;
  --b34-glass-bar: 10 12 16;
  --b34-glass-deep: 7 8 11;
  --b34-scrim: 5 6 9;
}

/* ── Светлая: тот же зелёный, темнее для контраста на белом ──────────────── */
:root[data-theme="light"] {
  --b34-bg: #f2f4f3;
  --b34-bg-lift: #f8faf9;
  --b34-panel: #ffffff;
  --b34-panel-2: #f6f8f7;
  --b34-inset: #e9eeeb;

  --b34-line: rgba(14, 38, 28, .09);
  --b34-line-2: rgba(14, 38, 28, .15);
  --b34-line-3: rgba(14, 38, 28, .26);

  --b34-text: #0d1512;
  --b34-text-2: rgba(13, 21, 18, .72);
  --b34-text-3: rgba(13, 21, 18, .52);
  --b34-text-4: rgba(13, 21, 18, .36);

  --b34-ac: #0c9a62;
  --b34-ac-bright: #0fb373;
  --b34-ac-04: rgba(12, 154, 98, .05);
  --b34-ac-08: rgba(12, 154, 98, .08);
  --b34-ac-12: rgba(12, 154, 98, .12);
  --b34-ac-20: rgba(12, 154, 98, .2);
  --b34-ac-30: rgba(12, 154, 98, .3);
  --b34-ac-50: rgba(12, 154, 98, .5);
  --b34-ac-ink: #ffffff;
  --b34-ac-rgb: 12 154 98;

  --b34-warn: #b7791f;
  --b34-warn-12: rgba(183, 121, 31, .12);
  --b34-warn-30: rgba(183, 121, 31, .3);
  --b34-danger: #c53b4a;
  --b34-danger-12: rgba(197, 59, 74, .1);
  --b34-danger-30: rgba(197, 59, 74, .3);
  --b34-info: #3768d6;
  --b34-info-12: rgba(55, 104, 214, .1);
  --b34-info-30: rgba(55, 104, 214, .3);
  --b34-violet: #6d4fd6;
  --b34-violet-12: rgba(109, 79, 214, .1);

  --b34-lift: 0 18px 50px rgba(14, 38, 28, .1);

  --b34-wash: 14 38 28;
  --b34-glass: 255 255 255;
  --b34-glass-hi: 255 255 255;
  --b34-glass-nav: 255 255 255;
  --b34-glass-bar: 255 255 255;
  --b34-glass-deep: 246 248 247;
  --b34-scrim: 226 232 229;
  --b34-danger-ink: #c53b4a;
  --b34-primary-hover: #000;

  color-scheme: light;
}

/* чёрные тени под шапками на светлом фоне выглядят грязно */
:root[data-theme="light"] .site-nav-in { box-shadow: 0 14px 40px rgba(14, 38, 28, .1); }
:root[data-theme="light"] #app-nav nav { box-shadow: 0 14px 40px rgba(14, 38, 28, .1) !important; }
:root[data-theme="light"] body::after { opacity: .7; }

/* ── Выбор темы: кнопка + список ───────────────────────────────────────── */
.b34-theme { position: relative; display: inline-flex; }
.b34-theme-btn,
.b34-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 34px;
  min-width: 34px;
  padding: 0 9px;
  border: 1px solid var(--b34-line-2);
  border-radius: var(--b34-r-chip);
  background: rgb(var(--b34-wash) / .03);
  color: var(--b34-text-3);
  font-family: var(--b34-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--b34-t) var(--b34-ease), border-color var(--b34-t) var(--b34-ease);
}
.b34-theme-btn:hover,
.b34-lang:hover { color: var(--b34-text); border-color: var(--b34-line-3); }
.b34-theme-btn[aria-expanded="true"] { color: var(--b34-text); border-color: var(--b34-ac-50); }
.b34-theme-btn svg { display: block; }

.b34-theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--b34-line-2);
  border-radius: var(--b34-r-card);
  background: rgb(var(--b34-glass-hi) / .97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--b34-lift);
}
.b34-theme-menu[hidden] { display: none; }
.b34-theme-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--b34-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--b34-text-3);
  text-decoration: none;
  transition: color var(--b34-t-fast) var(--b34-ease), background-color var(--b34-t-fast) var(--b34-ease);
}
.b34-theme-menu a:hover { color: var(--b34-text); background: rgb(var(--b34-wash) / .05); }
.b34-theme-menu a[aria-checked="true"] { color: var(--b34-text); }
.b34-theme-menu a[aria-checked="true"]::after { content: ''; width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--b34-ac); }
.b34-theme-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--b34-wash) / .25); }
.b34-theme-dot.is-emerald { background: #3ecf8e; }
.b34-theme-dot.is-graphite { background: #7c9cff; }
.b34-theme-dot.is-light { background: #eef2f0; }

/* в шапке публичных страниц: рядом с кнопкой «Вход» */
.site-nav-cta { display: flex; align-items: center; gap: 6px; }

/* в плавающей шапке входа и поддержки */
#app-nav .b34-theme-btn, #app-nav .b34-lang { height: 30px; min-width: 30px; }

/* в шапке кабинета — как соседние кнопки .c-icon-btn и «А+» */
.c-header .b34-theme-btn, .c-header .b34-lang {
  height: 36px;
  min-width: 36px;
  border-color: var(--b34-line);
  background: rgb(var(--b34-wash) / .02);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.c-header .b34-theme-btn:hover, .c-header .b34-lang:hover { border-color: var(--b34-line-3); background: rgb(var(--b34-wash) / .05); }

@media (prefers-reduced-motion: reduce) {
  .b34-theme-btn, .b34-lang, .b34-theme-menu a { transition: none; }
}

/* обёртка в плавающей шапке: в skin.css правила для прямых детей nav (a, div) — не задеваем их */
.nav-prefs { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; }