/* ОБЛИК ЦЕНТРА · краска и темнота сайта «Золотой Ясень»
   ═══════════════════════════════════════════════════════════════════════
   Этот файл — ЕДИНСТВЕННОЕ место, где у сайта живёт цвет. Меры (отступы,
   высоты, шкала шрифта, движение, радиусы) приезжают из общего каркаса
   yasna-karkas.css, собранного из системы платформы: одна семья решений
   на два сайта.

   ПОЧЕМУ КРАСКА НЕ ОБЩАЯ. Сайт — бумажный: тёплая страница, чернила,
   терракота, золото знаком. Платформа — нейтральный инструмент. Единство
   читается на каркасе и частях, а не на одинаковом синем; перекрасив сайт
   в цвета приложения, мы потеряли бы его лицо и ничего не выиграли.

   МОСТ СТАРЫХ ИМЁН. Вёрстка сорока четырёх страниц написана на прежних
   именах (--bg, --ink, --accent, --paper, --line). Мы их не выбрасываем:
   внизу они объявлены через новые роли. Поэтому тёмная тема приходит на
   все страницы разом, без переписывания разметки — а новые куски пишутся
   уже на ролях.

   ТЁМНАЯ ТЕМА — тёплая, а не серая. Тот же приём, что на платформе: три
   состояния (выбор руками перебивает настройку телефона), и ни один цвет
   не объявлен ТОЛЬКО внутри тёмного блока — иначе страница в одной теме
   получила бы чернила другой.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ СВЕТЛАЯ · бумага ═══════════════════════════════════════════════════ */
:root{
  /* Поверхности: страница, панель, приподнятое. Высоту передаёт тон. */
  --surface:                    #F3ECE0;
  --surface-container-lowest:   #FBF7EF;
  --surface-container:          #ECE3D4;
  --surface-container-high:     #E4D9C7;

  /* Чернила. Второстепенный — 4.86:1, а не прежние 4.00:1: прежний
     --ink-58 нормы не проходил, и это чинится здесь раз и навсегда. */
  --on-surface:                 #211B14;
  --on-surface-variant:         #6B665C;

  /* Терракота — главное действие и акцент словом. 5.58:1 на бумаге. */
  --primary:                    #A23C24;
  --on-primary:                 #F3ECE0;
  --primary-ink:                #8C3320;   /* слово, ссылка: 6.4:1 */
  --primary-container:          #F6DFD6;
  --on-primary-container:       #3B1108;

  /* ЗОЛОТО — ЗНАК, А НЕ СЛОВО. На бумаге даёт 2.64:1 и текстом быть не
     может; на чернилах 5.49:1 — там оно и живёт: обод знака, линейка,
     кольцо двенадцати рисок, ягоды ясеня. Правило простое: золотом мы
     ничего не пишем на светлом. */
  --znak:                       #B98A3C;
  --znak-yarkiy:                #E8C15A;

  /* Линии: граница как единственный признак — не ниже 3:1; декоративная
     линейка может быть тише, она ничего не сообщает одна. */
  --outline:                    #6E655A;
  --outline-variant:            rgba(33,27,20,.14);

  --error:                      #8E2C1B;
  --on-error:                   #F3ECE0;

  /* ВСЕГДА ТЁМНАЯ ПОВЕРХНОСТЬ. Подвал, разворот сбора, полоса cookie —
     они тёмные по замыслу, а не «цвета чернил»: в тёмной теме чернила
     светлеют, и такие блоки вывернулись бы наизнанку. Здесь они остаются
     тёмными в обеих темах, меняя лишь глубину. */
  --tyomnaya:                   #211B14;
  --na-tyomnoy:                 #F3ECE0;
  --na-tyomnoy-tiho:            rgba(243,236,224,.74);

  /* ШОВ — переход от страницы к тёмному развороту. В светлой теме это
     тёплая лестница из десяти ступеней (авторский приём главной), в тёмной
     перепада почти нет, и лестница превратилась бы в светлую полосу поперёк
     тёмной страницы — там короткий переход. */
  --shov: linear-gradient(180deg, var(--surface) 0%, #E8DCCB 10%, #DCCAB3 20%,
          #CBAF90 30%, #B3916B 40%, #94724B 50%, #725534 60%, #523E26 70%,
          #372B1C 80%, #262017 90%, var(--tyomnaya) 100%);

  /* Тень тёплая: у бумаги не бывает серой тени. */
  --elev-1: 0 1px 2px rgba(33,27,20,.06);
  --elev-2: 0 4px 14px rgba(33,27,20,.08);
  --elev-3: 0 14px 40px rgba(33,27,20,.10);

  /* Гарнитуры сайта. Роли объявлены в каркасе, значения — свои: шкала
     общая, голос свой. */
  --ya-font-display: 'Manrope', system-ui, sans-serif;
  --ya-font-text:    'Inter', system-ui, sans-serif;
  --ya-font-quote:   'Cormorant Garamond', Georgia, serif;

  color-scheme: light;
}

/* ═══ ТЁМНАЯ · тёплый уголь ══════════════════════════════════════════════
   Значения посчитаны, а не подобраны на глаз: текст 15.2:1, второстепенный
   6.6:1, терракота словом 6.3:1, золото 8:1, граница 3.2:1. Терракота на
   тёмном осветляется — исходная #A23C24 даёт там 2.85:1 и читаться не может.
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:                  #16120D;
    --surface-container-lowest: #110E0A;
    --surface-container:        #1E1913;
    --surface-container-high:   #262019;

    --on-surface:               #EFE7DA;
    --on-surface-variant:       #A39887;

    --primary:                  #E07A5F;
    --on-primary:               #1A0F0A;
    --primary-ink:              #EB8A6B;
    --primary-container:        #4A1C0F;
    --on-primary-container:     #FFDBCF;

    --znak:                     #D0A24E;
    --znak-yarkiy:              #E8C15A;

    --outline:                  #726450;
    --outline-variant:          rgba(239,231,218,.14);

    --error:                    #F2B8A8;
    --on-error:                 #1A0F0A;

    /* Тёмная поверхность в темноте чуть выше страницы: иначе подвал
       сольётся с фоном и перестанет читаться как отдельный блок. */
    --tyomnaya:                 #241E17;
  --shov: linear-gradient(180deg, var(--surface) 0%, #1C1712 45%, var(--tyomnaya) 100%);
    --shov: linear-gradient(180deg, var(--surface) 0%, #1C1712 45%, var(--tyomnaya) 100%);
    --na-tyomnoy:               #EFE7DA;
    --na-tyomnoy-tiho:          rgba(239,231,218,.74);

    /* В темноте высоту передаёт тон поверхности, а не тень. */
    --elev-1: none;
    --elev-2: none;
    --elev-3: 0 14px 40px rgba(0,0,0,.45);

    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --surface:                  #16120D;
  --surface-container-lowest: #110E0A;
  --surface-container:        #1E1913;
  --surface-container-high:   #262019;

  --on-surface:               #EFE7DA;
  --on-surface-variant:       #A39887;

  --primary:                  #E07A5F;
  --on-primary:               #1A0F0A;
  --primary-ink:              #EB8A6B;
  --primary-container:        #4A1C0F;
  --on-primary-container:     #FFDBCF;

  --znak:                     #D0A24E;
  --znak-yarkiy:              #E8C15A;

  --outline:                  #726450;
  --outline-variant:          rgba(239,231,218,.14);

  --error:                    #F2B8A8;
  --on-error:                 #1A0F0A;

  --tyomnaya:                 #241E17;
  --na-tyomnoy:               #EFE7DA;
  --na-tyomnoy-tiho:          rgba(239,231,218,.74);

  --elev-1: none;
  --elev-2: none;
  --elev-3: 0 14px 40px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* ═══ МОСТ СТАРЫХ ИМЁН ═══════════════════════════════════════════════════
   Прежние токены сайта продолжают работать — но значения берут у ролей.
   Благодаря этому тёмная тема приходит на всю прежнюю вёрстку разом.
   Объявлены ПОСЛЕ тем, чтобы подхватывать переопределённые значения.
   ──────────────────────────────────────────────────────────────────────── */
:root, [data-palette]{
  --bg:          var(--surface);
  --bg-deep:     var(--surface-container);
  --paper:       var(--surface-container-lowest);
  --ink:         var(--on-surface);
  --ink-2:       var(--on-surface-variant);
  --ink-3:       var(--on-surface-variant);
  --line:        var(--outline-variant);
  --line-strong: var(--outline);
  --accent:      var(--primary);
  --accent-ink:  var(--on-primary);
  --gold:        var(--znak);
  --gold-line:   var(--znak);
  --radius:      var(--shape-l, 16px);
  --radius-lg:   var(--shape-xl, 28px);

  /* Прозрачности чернил главной. Считаем от роли, а не от жёсткого чёрного:
     в темноте «чернила на 58%» обязаны стать светлыми на 58%, иначе текст
     исчезает. color-mix делает это сам, одним объявлением на обе темы. */
  --ink-74:   color-mix(in srgb, var(--on-surface) 74%, transparent);
  --ink-58:   color-mix(in srgb, var(--on-surface) 62%, transparent);
  --ink-38:   color-mix(in srgb, var(--on-surface) 38%, transparent);
  --line-2:   color-mix(in srgb, var(--on-surface) 8%, transparent);
  --gold-line:color-mix(in srgb, var(--znak) 45%, transparent);
  --paper-2:  var(--surface-container);
  --card:     var(--surface-container-lowest);
  /* Светлые чернила тёмных секций (подвал, разворот сбора) — там фон
     всегда тёмный в обеих темах, поэтому значения не зависят от темы. */
  --pg:       rgba(243,236,224,.74);
  --pg-2:     rgba(243,236,224,.62);
  --pg-line:  rgba(243,236,224,.16);
  --r-s:      var(--shape-xs, 4px);
  --r-m:      var(--shape-m, 12px);
  --sh:       var(--elev-3);
}

/* Страница красится ролями — без этого тёмная тема не доедет до фона. */
html{ background: var(--surface); }
body{ background: var(--surface); color: var(--on-surface); }

/* ═══ ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ════════════════════════════════════════════════
   Живёт строкой в меню шапки (бургер), не в самой шапке: «Тёмная тема»
   с луной слева и ползунком справа. Разметку строит tema.js на месте
   [data-tema-mesto]; состояние — aria-checked у <button role="switch">. */
.tema-mesto{ display:block; }
.tema-stroka{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:50px; padding:0; margin:0;
  border:0; background:transparent; color:var(--on-surface);
  font:inherit; font-size:1rem; line-height:1.3; text-align:left;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.tema-stroka:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--shape-xs,4px); }
.tema-znak{ display:inline-flex; color:var(--on-surface-variant); }
.tema-znak svg{ width:18px; height:18px; display:block; }
.tema-tekst{ flex:1 1 auto; }
.tema-polzunok{
  position:relative; flex:0 0 auto; width:40px; height:24px;
  border-radius:999px; border:1px solid var(--outline);
  background:var(--surface-container-highest, var(--surface-container));
  transition:background-color var(--dur-short,.15s) var(--ease-standard,ease),
             border-color var(--dur-short,.15s) var(--ease-standard,ease);
}
.tema-polzunok::after{
  content:""; position:absolute; top:50%; left:4px; width:14px; height:14px;
  margin-top:-7px; border-radius:50%; background:var(--outline);
  transition:transform var(--dur-short,.15s) var(--ease-standard,ease), background-color var(--dur-short,.15s);
}
.tema-stroka[aria-checked="true"] .tema-polzunok{ background:var(--primary); border-color:var(--primary); }
.tema-stroka[aria-checked="true"] .tema-polzunok::after{ transform:translateX(16px); background:var(--on-primary, #fff); }
.tema-stroka:hover .tema-polzunok{ border-color:var(--on-surface-variant); }
.tema-stroka[aria-checked="true"]:hover .tema-polzunok{ border-color:var(--primary); }
@media (prefers-reduced-motion: reduce){
  .tema-polzunok, .tema-polzunok::after{ transition:none; }
}

/* ═══ ЗНАК И ИМЯ ЦЕНТРА ══════════════════════════════════════════════════
   Как в шапке платформы: солнце из двенадцати лучей золотом, имя шрифтом
   заголовков, подпись мельче и тише — она поясняет род занятия, а не
   спорит с именем за внимание.

   Знак рисуется currentColor, поэтому цвет задаёт роль: в светлой теме
   тёплое золото, в тёмной — светлее. Прежняя растровая марка так не умела
   и оставалась одинаковой в обеих темах.
   ──────────────────────────────────────────────────────────────────────── */
.brand .mark{
  width:26px; height:26px; flex-shrink:0; color:var(--znak);
  display:inline-flex; align-items:center; justify-content:center;
  /* Прежняя марка была картинкой с рамкой и радиусом — у вектора их нет. */
  background:none; border:0; border-radius:0; box-shadow:none;
}
.brand .mark svg{ width:100%; height:100%; display:block; }
/* Ободок прежней марки (1/src/styles.css:131) — у вектора его быть не
   должно: знак сам себе форма. */
.brand .mark::before{ content:none; display:none; }
/* Прежняя марка была тёмным кружком с буквой внутри: гасим и сетку, и
   шрифтовые остатки, иначе внутри вектора останется место под литеру. */
.brand .mark{ display:inline-flex; place-items:initial; font-size:0; position:static; }

/* Имя и подпись: те же роли шкалы, что на платформе. */
.brand .brand-name, .brand .bt b{
  font:var(--type-title-l); letter-spacing:-.01em; color:var(--on-surface);
  white-space:nowrap;
}
.brand .brand-sub, .brand .bt span{
  font:var(--type-label-s); letter-spacing:.02em; color:var(--on-surface-variant);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* Строчными, как на платформе: прописные с широкой разрядкой — другой
     голос, и рядом с той же подписью в приложении это читалось бы как
     два разных центра. */
  text-transform:none;
}
.brand .brand-text, .brand .bt{
  display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0;
}
@media (max-width:560px){ .brand .mark{ width:22px; height:22px; } }