/* retrograde.pro · компоненты площадки под канон «Black Label» ред. 5 (07.11.2026, блок BL5-5, Epsilon)
 * Токены — канон ред. 5: /fonts/bl5/black-label.tokens.css (копия канона байт в байт), старые имена площадки —
 * слой соответствия набора (scripts/canon-kit/retrograde.pro.json, блок bl5). Ниже — правила компонентов из файла ред. 4
 * css/premium-canon.tokens.css без его токенов: тот файл остаётся для правовых страниц, их перевод не трогает.
 */
:root {
  --r: 2px;
  --font-symbols: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', sans-serif;
  --font-heading: var(--font-display);
  --font-sans: var(--font-body);
  --font-ui: var(--font-body);
  --font-nav: var(--font-mono);
}

/* В светлой теме «Альманах» отключаем ночной canvas звёздного неба #bg и размытие стекла (Закон п. 6) */
html.light #bg,
html[data-theme="light"] #bg,
html[data-theme="almanac"] #bg {
  display: none !important;
}
html.light *,
html[data-theme="light"] *,
html[data-theme="almanac"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Класс .mono обязан быть моноширинным (SKILL.md §2, §4 п. 7) */
.mono,
code,
kbd,
samp,
.checker-deg,
.planet-card__deg,
.planet-card__dates,
.timeline__dates {
  font-family: var(--font-mono) !important;
}

/* Знаки планет и зодиака — символьный стек с латунью (sutra.md §2, hub-389) */
.sun-label,
.planet-label,
.planet-card__symbol,
.timeline__symbol {
  font-family: var(--font-symbols) !important;
}

/* Канонический переключатель темы (SVG + текстовая подпись Альманах / Ночь) */
.theme-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  width: auto !important;
  height: auto !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-chip, 2px) !important;
  color: var(--text-ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-inout),
              background-color var(--duration-fast) var(--ease-inout),
              color var(--duration-fast) var(--ease-inout);
  line-height: 1.2;
  white-space: nowrap;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--accent-struct-text) !important;
  color: var(--accent-struct-text) !important;
  outline: none;
}
.theme-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .theme-toggle {
    padding: 4px 7px !important;
    font-size: 9.5px !important;
    gap: 4px !important;
    letter-spacing: 0.03em !important;
  }
  .theme-toggle svg {
    width: 12px;
    height: 12px;
  }
}

/* Переопределения общих виджетов /sw/v2/* и /v2/* для соблюдения канона и контраста WCAG >= 4.5:1 */
#sutra-ecosystem-bar,
.sutra-eco-bar,
#sutra-Dynamic-Footer,
.sutra-footer-wrap,
#sutra-legal-footer,
.srvb,
.srvb-h,
.srv-btn {
  font-family: var(--font-body) !important;
}
#sutra-ecosystem-bar *,
.sutra-eco-bar *,
#sutra-Dynamic-Footer *,
.sutra-footer-wrap *,
#sutra-legal-footer *,
.srvb * {
  font-family: inherit !important;
}
.srvb-h,
.srv-btn,
.srv-h,
.srv-code,
.srv-banner-cta,
.ag-title,
.ag-limit-btn,
.sf-title,
.sf-btn {
  font-family: var(--font-mono) !important;
}
.srv-btn,
.sf-btn,
.ag-fab,
.ag-send {
  background-color: var(--accent-emphasis) !important;
  background-image: none !important;
  color: var(--text-on-struct) !important;
  border: 1px solid var(--accent-struct) !important;
  border-radius: var(--radius-card, 4px) !important;
  box-shadow: none !important;
}
html.light #sutra-ecosystem-bar,
html[data-theme="light"] #sutra-ecosystem-bar,
html[data-theme="almanac"] #sutra-ecosystem-bar {
  background: var(--surface-card) !important;
  border-bottom: 1px solid var(--hairline) !important;
  color: var(--text-ink) !important;
}
html.light #sutra-ecosystem-bar a,
html[data-theme="light"] #sutra-ecosystem-bar a,
html.light #sutra-ecosystem-bar span,
html[data-theme="light"] #sutra-ecosystem-bar span,
html.dark #sutra-ecosystem-bar a,
html[data-theme="dark"] #sutra-ecosystem-bar a,
html[data-theme="astra"] #sutra-ecosystem-bar a,
html.dark #sutra-ecosystem-bar span,
html[data-theme="dark"] #sutra-ecosystem-bar span,
html[data-theme="astra"] #sutra-ecosystem-bar span {
  color: var(--text-body) !important;
}
html.light #sutra-ecosystem-bar a:hover,
html[data-theme="light"] #sutra-ecosystem-bar a:hover,
html.dark #sutra-ecosystem-bar a:hover,
html[data-theme="dark"] #sutra-ecosystem-bar a:hover {
  color: var(--gold) !important;
}

/* Ниша-баннер #sutra-niche и плашка-мост .sutra-bridge — без градиентов и с контрастом >= 4.5:1 */
#sutra-niche,
.sutra-bridge {
  background: var(--surface-card) !important;
  border-color: var(--hairline) !important;
  color: var(--text-body) !important;
}
#sutra-niche a,
.sutra-bridge a {
  color: var(--gold) !important;
}

/* Полоса прогресса (free vs paid) в виджетах */
#sutra-progress-bar,
.sutra-progress-wrap {
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--text-ink) !important;
}
#sutra-progress-bar span,
.sutra-progress-wrap span {
  color: var(--text-body) !important;
}

/* Парадные латунные кнопки CTA — Закон п. 2 и п. 4: --accent-emphasis, тёмный текст --text-on-struct, без градиентов, радиус <= 4px */
.cta,
.cta-btn,
.btn--primary,
.btn--gold,
.hero__checker-btn,
#premium-buy-btn,
.retro-sticky-bar__btn,
.blur-paywall-btn {
  background-color: var(--accent-emphasis) !important;
  background-image: none !important;
  color: var(--text-on-struct) !important;
  border: 1px solid var(--accent-struct) !important;
  border-radius: var(--radius-card, 4px) !important;
  font-family: var(--font-mono) !important;
}