/* ═══ ПАЛИТРА ЯДРА ═══════════════════════════════════════════════════════════════════
   Переехала сюда из style.css :root (Ф1 пп.1 и 7, 12.08). Причина переезда: этот файл
   подключён на всех поверхностях, включая лендинг фотокниг, а style.css туда подключить
   нельзя — 45 его классов пересекаются с инлайн-CSS лендинга (замер 06.08).

   До переезда палитра существовала в трёх копиях: в style.css, на #build в
   albums-section.css и на #wizStep1 в photobook-card.css. Копии были нужны, пока лендинг
   объявлял те же имена со своим смыслом; после переименования его палитры в --fk-*
   конфликта нет, и копии сняты из генераторов.

   Переопределения под @media (--gutter на узких экранах и прочее) остались в style.css:
   они работают поверх этого блока. */
:root {
  --bg: #faf6ef;
  --bg-alt: #f2ead8;
  --fg: #1c1410;
  --muted: #6b5c4e;
  --accent: #b8652a;
  --accent-hover: #9a5020;
  --accent-soft: #e8b88a;
  --line: rgba(28,20,16,0.12);
  --card: #ffffff;
  --dark: #221510;
  --sans: 'Inter', sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  /* Словомарка «фотоцвет» — Jost 600 строчными. Гарнитура НАМЕРЕННО не совпадает ни с --sans,
     ни с --serif: марка не должна осиротеть при следующей смене UI-кита (решение 09.08). */
  --wordmark: 'Jost', system-ui, sans-serif;
  --radius: 16px;
  --shadow: 0 4px 24px rgba(28,20,16,0.10);

  /* ЕДИНАЯ РАМКА МЕДИА (канон 21.07). Высота окна, в котором показывается фото или видео
     на ВСЁМ пути: выбор → обработка → результат, во всех разделах Мастерской
     (Восстановить / Оживить / Фотолаборатория). Содержимое вписывается через
     object-fit: contain — вертикальные и горизонтальные кадры занимают одинаковую высоту,
     блок не «прыгает» при смене фото и при переходе к результату.
     Правится ТОЛЬКО здесь: точечные max-height на img/video заводить заново нельзя. */
  --media-frame-h: clamp(220px, 38vh, 360px);

  /* Вертикальный ритм секций. Одна шкала на всю главную:
     секция = --section-y сверху и снизу, заголовок → контент = --section-head-gap.
     Мобильные значения переопределяются в @media (см. хвост файла). */
  --section-y: 72px;
  --section-head-gap: 32px;

  /* Боковое поле страницы (канон 29.07). Одна вертикальная линия для ВСЕГО контента:
     заголовок секции, одиночная надпись, карточка, кнопка — все стартуют отсюда.
     Мобильные 16px — IBM Carbon margin / Material 16dp. Внутренний padding карточки
     задаётся отдельно и НЕ больше внешнего поля: иначе текст внутри карточки уходит
     от края дальше, чем текст вне её, и единая левая линия рвётся.
     В край (full-bleed) имеют право только фон секции, медиа и трек карусели —
     контент внутри них всё равно выравнивается по этой линии. */
  --gutter: 48px;

  /* Токен-система полутонов (канон: mockups/palette-tokens-mockup.html, 02.07).
     Лестница бумаги (фоны, светлый → тёмный); paper-1/2 и terra — алиасы легаси-переменных. */
  --paper-0: #fffdf8;         /* карточки-вкладыши, поля ввода, кноб тумблера */
  --paper-1: var(--bg);       /* фон страницы */
  --paper-2: var(--bg-alt);   /* подложки секций, треки */
  --paper-3: #eadfc8;         /* треки тумблеров, прогресс-фоны */
  --paper-4: #d8c8b0;         /* скелетоны, заглушки */
  --line-strong: rgba(28,20,16,0.28);
  /* Чернила (текст) */
  --ink: var(--fg);
  --ink-soft: #5c4e3f;        /* вторичный текст, подписи */
  --ink-mute: #9a8f7e;        /* даты, счётчики, плейсхолдеры */
  /* Терракота — по ролям: одно главное действие на экран */
  --terra: var(--accent);
  --terra-press: var(--accent-hover);

  /* ЦВЕТОВОЙ КОД — единая система выделения (канон 05.08, план
     .planning/features/color-system-rollout.md, спека mockups/color-system-final.html).
     Ровно одна тёплая заливка состояния и один способ пометить выбранное.
     Новый экран своего оттенка не заводит — берёт отсюда.
     Наведение и нажатие задаются СЛОЕМ (::before + opacity), а не собственным цветом:
     градиенты не интерполируются в transition, а фон-картинка была бы затёрта. */
  --pick-bg:      #f9efe1;               /* заливка выбранного — единственная */
  --pick-mark:    #b8652a;               /* рамка, кольцо, полоска, линия таба */
  --pick-ink:     #9a5020;               /* акцентный ТЕКСТ, 5,21:1 на --pick-bg.
                                            Имя не --accent-ink: то уже занято обратной
                                            ролью — надпись НА акценте (fotokniga.html,
                                            .cart-confirm__go). */
  --hover-layer:  rgba(184,101,42,.07);  /* наведение — слой поверх любого фона */
  --press-layer:  rgba(184,101,42,.14);  /* нажатие */
  --surface-soft: #faf4f0;               /* подложка контентной группы */
  --track:        #f2ead8;               /* дорожка segmented control, больше нигде */
  --disabled-ink: #77726f;               /* 4,75:1 — вместо гашения через opacity */
  --disabled-bg:  #f7f5f3;

  /* Шрифт заголовков (решение 28.07): Onest. Пока применяется в редакторе фотокниг;
     перевод остальных заголовков сайта — отдельным заходом с приёмкой. */
  --font-head: 'Onest', 'Inter', -apple-system, sans-serif;
}

/* Ролевые токены дизайн-системы. Подключается ПЕРВЫМ на всех поверхностях, включая
   fotokniga.html — туда style.css подключить нельзя (45 классов пересекаются с её
   инлайн-CSS), а переменные не конфликтуют: это просто имена, классов тут нет.

   Зачем файл появился (разбор 12.08, .planning/features/design-system.md).
   Токен --accent нёс ДВЕ роли сразу: заливку кнопки и краску текста/рамки на светлом фоне.
   Из-за этого бренд нельзя было переключить сменой значения — жёлтый #ffc95c как заливка
   читаем (11.89:1), как текст на белом даёт 1.53:1. Приходилось перечислять узлы поимённо:
   fotokniga-albums-theme.css вырос до 57 правил и 97 селекторов, и всё равно упускал —
   замер 12.08 нашёл терракотовую тень под жёлтой кнопкой.

   Здесь роли разведены. Заливка, краска поверх заливки и краска текста — разные имена.
   Бренд переключается атрибутом data-brand на <html>, а не списком селекторов; новая
   кнопка перекрашивается сама, дописывать её никуда не нужно.

   ⚠️ Старые имена (--accent, --fg, --bg …) остаются в :root style.css и НЕ трогаются:
   оттуда их копируют генераторы albums-section.css и photobook-card.css (берут первый
   блок `:root {`). Слияние трёх копий палитры — отдельная фаза, не эта. */

:root {
  /* Бренд «Фотоцвет» — терракота. Поверхности: главная, посадочные, Мастерская,
     конструктор под Мастерской. */
  --fill-accent: #b8652a;
  --fill-accent-hover: #9a5020;
  --on-fill-accent: #fff;
  --shadow-accent: rgba(184, 101, 42, 0.3);
  --shadow-accent-strong: rgba(184, 101, 42, 0.4);

  /* Краска текста и рамок на светлом фоне. До Ф1c это свойство держали 27 селекторов отката
     в теме лендинга; с 12.08 его держит эта строка, а откат снят.

     Брендом переключается — но не в брендовый цвет, а в читаемую нейтраль (вердикт 13.08,
     см. блок html[data-brand="fotokniga"] ниже). Жёлтый в этой роли невозможен: 1.53:1
     на белом. Запрет на нечитаемую краску держит тест Ф5.2b, а не эта строка. */
  --ink-accent: #b8652a;

  /* Недоступное состояние — нейтраль, одна на оба бренда. Не opacity
     (KB parent-opacity-bleeds-into-pseudo-tooltip) и не золотистый оттенок: тот читался
     как отдельный акцент, а не как «недоступно» (фидбек 22.07). */
  --fill-disabled: #e8ddd0;
  --on-fill-disabled: #6a5a48;

  /* Заливка галочки-бейджа выбранной карточки (сплошная, не слой) — по умолчанию равна
     заливке кнопки, роль отдельная от --fill-accent, чтобы витрина фотокниг могла увести
     ТОЛЬКО бейдж в нейтраль, не трогая CTA-кнопки (те тоже читают --fill-accent). */
  --pick-mark-fill: var(--fill-accent);
  --on-pick-mark-fill: var(--on-fill-accent);

  /* ВТОРИЧНОЕ ДЕЙСТВИЕ — заливка кнопки, которая на экране не главная (13.08).
     Роль заведена под кнопку автосборки книги («Собрать книгу» / «Другой вариант книги»):
     она стоит в одном экране с «Добавить в корзину» и до 13.08 была залита ТЕМ ЖЕ
     насыщенным акцентом, то есть вторичное действие кричало наравне с основным.

     Канон вторичного действия — НЕ второй акцентный цвет, а понижение веса. С 13.08
     иерархия пары ДИНАМИЧЕСКАЯ (ADR-026): акцент носит следующий шаг пути, свап по
     серверному canOrder (album.js syncAssembleBtn / renderCartButton). Эти токены
     одевают кнопку, которая сейчас уступила акцент.

     Форма — «белая карточка», бренд-фри и ОДНА на обе оболочки (выбор оператора 13.08
     по мокапам secondary-fill-variants.html + secondary-state-swap.html). Два статических
     захода до неё отклонены глазом: нейтраль #ede8e0 с рамкой #8a7862 (заливка отличалась
     от --fill-disabled на 1.10 — форма «недоступно»), затем тональная терракота / нейтраль
     с янтарной рамкой (на кремовом фоне бледные тёплые заливки тонут). Рамка #d6cab8 —
     та же, что у базовых .album-btn-icon: тихая форма намеренно совпадает с остальными
     спокойными кнопками раздела. Сторож — scenarios/brand-parity-secondary.mjs. */
  --fill-secondary: #fff;
  --fill-secondary-hover: #faf3ea;
  --on-fill-secondary: #1c1410;
  --border-secondary: #d6cab8;

  /* Кольцо разового пульса пробуждения корзины (ADR-026: переход canOrder false→true). */
  --wake-ring: rgba(184, 101, 42, 0.5);
}

/* Бренд «Фотокнига» — жёлтый. Поверхности: лендинг фотокниг и конструктор ПОД НИМ.
   Конструктор своего бренда не знает: читает те же имена, значение приходит от оболочки.

   Атрибут стоит на <html>, а не на #build, намеренно. Модалки (shared/modal.js) и окно
   тура монтируются в document.body — до них префикс #build не достаёт, и каждая такая
   поверхность требовала отдельной заплаты в теме. С корня наследуется всё. */
html[data-brand="fotokniga"] {
  --fill-accent: #ffc95c;
  --fill-accent-hover: #f0b23f;
  --on-fill-accent: #1c1410;

  /* Тень нейтральная тёмная — решение оператора 12.08 по макапу mockups/cta-brand-variants.html.
     До этого под жёлтой кнопкой лежала терракотовая (дефект, найденный замером 12.08: тема
     переопределяла background и color, а box-shadow в её список из 14 селекторов не попала).
     Вариант выбран из четырёх снятых с живого экрана; на приёмке отмечено, что разница между
     всеми четырьмя почти неразличима — тень задана как 0 1px 3px при прозрачности 0,3.
     Нейтральная выбрана как единственная, не привязанная к чужому бренду.
     ⚠️ Только для «Фотокниги». У «Фотоцвета» тень остаётся терракотовой: там она лежит под
     терракотовой же кнопкой и в чужой цвет не выбивается. */
  --shadow-accent: rgba(28, 20, 16, 0.18);
  --shadow-accent-strong: rgba(28, 20, 16, 0.26);

  /* Краска текста и рамок — тёмная нейтраль (вердикт оператора 13.08 по макапу
     mockups/ink-fotokniga-verdict.html, три варианта на 38 ink-элементах замера Ф4).
     Терракота здесь принадлежит чужому бренду и спорит с жёлтой заливкой рядом; жёлтый
     в этой роли нечитаем (1.53:1 на белом) — поэтому уход в нейтраль, а не в бренд.

     Значение то же, что у --pick-ink под этой оболочкой: не новый оттенок, а тот,
     что здесь уже прижился. Контраст 12.45:1 на белом, 11.56:1 на фоне страницы
     (было 4.26 и 3.95 — принятое исключение, от которого этот бренд теперь уходит). */
  --ink-accent: #3d3229;

  /* Выделение выбранного — нейтральное тёмное, решение оператора 12.08. Тот же приём, что
     у --shadow-accent выше: нейтраль как единственная, не привязанная к чужому бренду —
     терракота принадлежит «Фотоцвету», жёлтый в роли рамки/краски нечитаем (1.53:1 на белом).
     Разведка 12.08 (grep --pick-mark/--press-layer/--hover-layer/--pick-bg/--pick-ink):
     конструктор фотокниг ходит под двумя оболочками и своего бренда не знает — читает эти
     токены везде (sidebar, wizard шаг 1, cover-tpl, crop-aspect, nav-thumb, variant popover,
     пикер .add-photos-card). Переопределение здесь красит выделение во ВСЕХ этих местах
     разом, только под этой оболочкой — Мастерская (workshop.html) data-brand не объявляет,
     её --pick-* остаются терракотовыми. */
  --pick-bg:      #f2ede5;               /* нейтральная светлая подложка вместо тёплой кремовой */
  --pick-mark:    rgba(28, 20, 16, 0.55);
  --pick-ink:     #3d3229;               /* тёмная читаемая краска вместо терракотовой,
                                            10,68:1 на --pick-bg (было 5,21:1 на терракоте) */
  --hover-layer:  rgba(28, 20, 16, 0.07);
  --press-layer:  rgba(28, 20, 16, 0.14);

  /* Галочка-бейдж выбранной карточки — тёмная нейтральная заливка + белый значок, а не
     жёлтая (--fill-accent здесь жёлтый и занят CTA-кнопками, трогать нельзя). */
  --pick-mark-fill: #1c1410;
  --on-pick-mark-fill: #fff;

  /* Тихая форма вторичного действия НЕ переопределяется: белая карточка бренд-фри
     (ADR-026). Кольцо пульса — янтарное: терракота здесь чужая, а сам жёлтый #ffc95c
     на кремовом фоне почти невидим (1.42). */
  --wake-ring: rgba(240, 178, 63, 0.65);
}