/* ПРЕМИУМ-КАНОН НИИ · Голос SUTRA (retrograde.pro) · Токены редакция 2 от 22.10.2026 (К9)
 * Дом канона: G:\Мой диск\02_INSTITUTE\02_01_MULTIMEDIA BRANDBOOKS\02_12_PREMIUM_CANON\premium-canon.tokens.css
 * Зеркало: agents/gamma/design-canon/premium/premium-canon.tokens.css + .claude/skills/brandbook/references/sutra.md
 * Голос SUTRA:
 *   - тёмная тема «Ночь»: --surface-page #08060A, карточка #1E150D, фокус #2B1D14 (страница темнее карточки темнее фокуса)
 *   - светлая тема «Альманах» («лист»): --surface-page #EFE9DC, карточка #FAF6EE, фокус #FDFBF6
 *   - гарнитуры (две и моно, третья запрещена): Cormorant Garamond (display), Jost (body), JetBrains Mono (mono)
 *   - парадная латунная кнопка: --accent-emphasis с тёмным текстом --text-on-struct (#241F17 / #160F09); белый по латуни запрещён
 *   - радиус <= 4 px; градиентов на кнопках нет; стекло только в тёмной теме; фиолет в кнопках/плашках запрещён
 */

:root {
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --radius-card: 4px;
  --radius-inner: 2px;
  --radius-chip: 2px;
  --radius-pill: 999px;
  --r: 2px;

  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 120ms;
  --duration-mid: 220ms;

  /* Гарнитуры: в вебе две и моно (PREMIUM-CANON.md п. 5, sutra.md §1) + символьный субсет для знаков */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', sans-serif;
  --font-mono:    'JetBrains Mono', Consolas, monospace;
  --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);
}

/* ── СВЕТЛАЯ ТЕМА «АЛЬМАНАХ» («ЛИСТ») ─────────────────────────────────────────────────────── */
:root,
[data-theme="light"],
[data-theme="almanac"],
html.light:not([data-theme="dark"]) {
  color-scheme: light;

  /* Поверхности (Закон п. 3: страница темнее карточки темнее фокального слоя) */
  --surface-page:  #EFE9DC;
  --surface-card:  #FAF6EE;
  --surface-focal: #FDFBF6;

  /* Чернила (WCAG AA+ >= 5.15:1 на странице, >= 5.78:1 на карточке, >= 6.03:1 на фокусе) */
  --text-ink:   #241F17;
  --text-body:  #473F31;
  --text-muted: #6B5F4D;
  --text-soft:  #6B5F4D;

  /* Акценты и статусы (К9 ред. 2 от 22.10.2026) */
  --accent-struct:      #B08D4F;
  --accent-struct-text: #7A5E32;
  --accent-emphasis:    #B08D4F;
  --text-on-struct:     #241F17;
  --accent-action:      #2F6356;
  --accent-action-text: #2C5A4E;
  --text-on-action:     #FDFBF6;
  --accent-hot:         #9B2D1F;
  --text-on-hot:        #FDF6E3;

  --status-good: #37704F;
  --status-warn: #7E5F22;
  --status-bad:  #9B2D1F;

  --hairline:   rgba(176, 141, 79, .26);
  --hairline-2: rgba(176, 141, 79, .14);
  --shadow-card:       0 1px 2px rgba(60, 48, 28, .04), 0 6px 20px rgba(60, 48, 28, .07), inset 0 0 0 1px var(--hairline-2);
  --shadow-card-hover: 0 2px 4px rgba(60, 48, 28, .06), 0 14px 34px rgba(60, 48, 28, .11), inset 0 0 0 1px var(--hairline);
  --shadow-focal:      0 2px 6px rgba(60, 48, 28, .05), 0 18px 46px rgba(60, 48, 28, .10), inset 0 0 0 1px rgba(176, 141, 79, .18);

  /* Закон п. 6: стекло и свечение в светлой теме не применяются */
  --glass-bg: transparent;  --glass-blur: 0px;  --glass-border: transparent;
  --glow-soft: none;  --glow-card: none;  --glow-strong: none;

  /* Слой соответствия для исторических переменных retrograde.pro */
  --bg:           var(--surface-page);
  --void:         var(--surface-page);
  --surface:      var(--surface-card);
  --bg-card:      var(--surface-card);
  --surface-2:    var(--surface-focal);
  --raised:       var(--surface-focal);
  --bg-raised:    var(--surface-focal);
  --text:         var(--text-ink);
  --ink-primary:  var(--text-ink);
  --text-m:       var(--text-body);
  --ink-secondary:var(--text-body);
  --text-d:       var(--text-muted);
  --text-dim:     var(--text-muted);
  --ink-muted:    var(--text-muted);
  --ink-on-accent:var(--text-on-struct);
  --brass:        var(--accent-struct);
  --gold:         var(--accent-struct-text);
  --gold-b:       var(--accent-struct-text);
  --gold-l:       var(--accent-struct-text);
  --gold-dim:     var(--accent-struct-text);
  --accent-warm:  var(--accent-struct-text);
  --gold-d:       rgba(176, 141, 79, .10);
  --mars:         var(--status-bad);
  --mars-l:       var(--status-bad);
  --accent-seal:  var(--status-bad);
  --mars-d:       rgba(155, 45, 31, .08);
  --mint:         var(--accent-action-text);
  --mint-l:       var(--accent-action-text);
  --mint-p:       var(--accent-action-text);
  --accent-mint:  var(--accent-action-text);
  --mint-d:       rgba(47, 99, 86, .08);
  --rahu:         var(--accent-struct-text);
  --accent-rahu:  var(--accent-struct-text);
  --rahu-d:       rgba(176, 141, 79, .08);
  --border:       var(--hairline);
  --rule-hairline:var(--hairline);
  --border-s:     var(--hairline);
  --border-hover: var(--hairline);
  --rule-strong:  var(--hairline);
  --card-hover:   rgba(176, 141, 79, .06);
  --blur-overlay: rgba(239, 233, 220, .92);
}

/* ── ТЁМНАЯ ТЕМА «НОЧЬ» (SUTRA, sutra.md §1) ──────────────────────────────────────────────── */
[data-theme="dark"],
[data-theme="astra"],
html.dark:not([data-theme="light"]):not([data-theme="almanac"]) {
  color-scheme: dark;

  /* Поверхности (Закон п. 3 и sutra.md §1: ночь #08060A -> карточка #1E150D -> фокус #2B1D14) */
  --surface-page:  #08060A;
  --surface-card:  #1E150D;
  --surface-focal: #2B1D14;

  /* Чернила */
  --text-ink:   #FDF6E3;
  --text-body:  #C6B69A;
  --text-muted: #968065;
  --text-soft:  #968065;

  /* Акценты и статусы */
  --accent-struct:      #C19A6B;
  --accent-struct-text: #C19A6B;
  --accent-emphasis:    #C19A6B;
  --text-on-struct:     #160F09;
  --accent-action:      #8FC4B0;
  --accent-action-text: #8FC4B0;
  --text-on-action:     #160F09;
  --accent-hot:         #9B2D1F;
  --text-on-hot:        #FDF6E3;

  --status-good: #5A9E6A;
  --status-warn: #D4A830;
  --status-bad:  #C97070;

  --hairline:   rgba(193, 154, 107, .26);
  --hairline-2: rgba(193, 154, 107, .14);
  --shadow-card:       0 4px 20px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--hairline-2);
  --shadow-card-hover: 0 0 15px rgba(193, 154, 107, .15), inset 0 0 0 1px var(--hairline);
  --shadow-focal:      0 0 0 1px rgba(193, 154, 107, .12), 0 6px 28px rgba(0, 0, 0, .50);

  --glass-bg: rgba(30, 21, 13, .62);  --glass-blur: 5px;  --glass-border: rgba(193, 154, 107, .18);
  --glow-soft: 0 0 5px rgba(193, 154, 107, .20);
  --glow-card: 0 0 15px rgba(193, 154, 107, .15);
  --glow-strong: 0 0 25px rgba(193, 154, 107, .50);

  /* Слой соответствия для исторических переменных retrograde.pro */
  --bg:           var(--surface-page);
  --void:         var(--surface-page);
  --surface:      var(--surface-card);
  --bg-card:      var(--surface-card);
  --surface-2:    var(--surface-focal);
  --raised:       var(--surface-focal);
  --bg-raised:    var(--surface-focal);
  --text:         var(--text-ink);
  --ink-primary:  var(--text-ink);
  --text-m:       var(--text-body);
  --ink-secondary:var(--text-body);
  --text-d:       #A48E72; /* >= 4.77:1 даже на фокальном слое #2B1D14 */
  --text-dim:     #A48E72;
  --ink-muted:    var(--text-muted);
  --ink-on-accent:var(--text-on-struct);
  --brass:        var(--accent-struct);
  --gold:         var(--accent-struct);
  --gold-b:       var(--accent-struct);
  --gold-l:       var(--accent-struct);
  --gold-dim:     var(--accent-struct);
  --accent-warm:  var(--accent-struct);
  --gold-d:       rgba(193, 154, 107, .10);
  --mars:         var(--status-bad);
  --mars-l:       var(--status-bad);
  --accent-seal:  var(--status-bad);
  --mars-d:       rgba(201, 112, 112, .10);
  --mint:         var(--accent-action);
  --mint-l:       var(--accent-action);
  --mint-p:       var(--accent-action);
  --accent-mint:  var(--accent-action);
  --mint-d:       rgba(143, 196, 176, .10);
  --rahu:         var(--accent-struct);
  --accent-rahu:  var(--accent-struct);
  --rahu-d:       rgba(193, 154, 107, .08);
  --border:       var(--hairline);
  --rule-hairline:var(--hairline);
  --border-s:     var(--hairline);
  --border-hover: var(--hairline);
  --rule-strong:  var(--hairline);
  --card-hover:   rgba(193, 154, 107, .05);
  --blur-overlay: rgba(8, 6, 10, .92);
}

/* Первый визит без JS: тема = система посетителя (слово владельца 18.09.2026) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(.light) {
    color-scheme: dark;
    --surface-page: #08060A;  --surface-card: #1E150D;  --surface-focal: #2B1D14;
    --text-ink: #FDF6E3;  --text-body: #C6B69A;  --text-muted: #968065;  --text-soft: #968065;
    --accent-struct: #C19A6B;  --accent-struct-text: #C19A6B;  --accent-emphasis: #C19A6B;  --text-on-struct: #160F09;
    --accent-action: #8FC4B0;  --accent-action-text: #8FC4B0;  --text-on-action: #160F09;  --accent-hot: #9B2D1F;  --text-on-hot: #FDF6E3;
    --status-good: #5A9E6A;  --status-warn: #D4A830;  --status-bad: #C97070;
    --hairline: rgba(193, 154, 107, .26);  --hairline-2: rgba(193, 154, 107, .14);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--hairline-2);
    --shadow-card-hover: 0 0 15px rgba(193, 154, 107, .15), inset 0 0 0 1px var(--hairline);
    --shadow-focal: 0 0 0 1px rgba(193, 154, 107, .12), 0 6px 28px rgba(0, 0, 0, .50);
    --glass-bg: rgba(30, 21, 13, .62);  --glass-blur: 5px;  --glass-border: rgba(193, 154, 107, .18);
    --glow-soft: 0 0 5px rgba(193, 154, 107, .20);  --glow-card: 0 0 15px rgba(193, 154, 107, .15);
    --glow-strong: 0 0 25px rgba(193, 154, 107, .50);
    --bg: var(--surface-page);  --void: var(--surface-page);
    --surface: var(--surface-card);  --bg-card: var(--surface-card);
    --surface-2: var(--surface-focal);  --raised: var(--surface-focal);  --bg-raised: var(--surface-focal);
    --text: var(--text-ink);  --ink-primary: var(--text-ink);
    --text-m: var(--text-body);  --ink-secondary: var(--text-body);
    --text-d: #A48E72;  --text-dim: #A48E72;  --ink-muted: var(--text-muted);
    --ink-on-accent: var(--text-on-struct);
    --brass: var(--accent-struct);  --gold: var(--accent-struct);  --gold-b: var(--accent-struct);
    --gold-l: var(--accent-struct);  --gold-dim: var(--accent-struct);  --accent-warm: var(--accent-struct);
    --gold-d: rgba(193, 154, 107, .10);
    --mars: var(--status-bad);  --mars-l: var(--status-bad);  --accent-seal: var(--status-bad);
    --mars-d: rgba(201, 112, 112, .10);
    --mint: var(--accent-action);  --mint-l: var(--accent-action);  --mint-p: var(--accent-action);  --accent-mint: var(--accent-action);
    --mint-d: rgba(143, 196, 176, .10);
    --rahu: var(--accent-struct);  --accent-rahu: var(--accent-struct);  --rahu-d: rgba(193, 154, 107, .08);
    --border: var(--hairline);  --rule-hairline: var(--hairline);
    --border-s: var(--hairline);  --border-hover: var(--hairline);  --rule-strong: var(--hairline);
    --card-hover: rgba(193, 154, 107, .05);  --blur-overlay: rgba(8, 6, 10, .92);
  }
}

/* В светлой теме «Альманах» отключаем ночной 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;
}