/* tokens.css — все токены из frontmatter DESIGN.md.
   Это единственный файл, где живут литеральные значения дизайна.
   В остальных стилях — только var(--…). */

:root {
  color-scheme: light;

  /* ── Цвета: чернильная рампа (перекрашена в светлую тёплую —
     таск 01 «light-repalette», эталон donskih.com) ─────────────── */
  --color-ink: #f7f5f3;
  --color-ink-raise: #fffdfc;
  --color-card: #ffffff;
  --color-card-hover: #e5e0d8;
  --color-line: #dfdfdf;
  --color-line-strong: #d6d6d6;

  /* ── Цвета: оксблад ──────────────────────────────────────────── */
  --color-oxblood: #83191d;
  --color-oxblood-deep: #6b1418;

  /* ── Цвета: лак (единственный акцент) ────────────────────────── */
  --color-lacquer: #cf2431;
  --color-lacquer-hover: #b81c28;
  --color-lacquer-tint: rgba(207, 36, 49, 0.14);

  /* ── Цвета: костяная рампа ───────────────────────────────────── */
  --color-bone: #f4f1ec;
  --color-bone-surface: #ffffff;
  --color-bone-hover: #ebe6df;
  --color-bone-line: #ddd6cc;

  /* ── Цвета: текст (на новом светлом ink-поле — тёмный, инверсия) ── */
  --color-text: #1a1a1a;
  --color-text-muted: #726a66;
  --color-text-faint: #a89f9a;
  --color-text-on-bone: #121010;
  --color-text-on-bone-muted: #6d6461;

  /* Текст на оксбладе (DESIGN.md → Colors → Text). */
  --color-text-on-oxblood: #fbf7f2;
  --color-text-on-oxblood-muted: rgba(251, 247, 242, 0.72);

  /* ── Цвета: семантика (никогда не цветом одним; значения пересчитаны
     под новый светлый ink-грунт таска 01 — были рассчитаны под тёмный,
     на светлом давали AA ~2.1–2.3, ниже порога 4.5) ───────────────── */
  --color-success: #146c43;
  --color-error: #b3261e;

  /* ── Нейтральные подложки поверх чернильного поля (теперь светлого,
     подложка тёмная — тот же приём, что у --field-veil костяного поля) */
  --color-veil: rgba(26, 26, 26, 0.06);
  --color-veil-line: rgba(26, 26, 26, 0.14);

  /* ── Типографика: две гарнитуры ──────────────────────────────── */
  --font-display: Oswald, Haettenschweiler, Impact, sans-serif;
  --font-text: "Golos Text", -apple-system, "Segoe UI", sans-serif;

  --type-hero-size: clamp(30px, 9vw, 46px);
  --type-hero-weight: 700;
  --type-hero-line: 1;
  --type-hero-tracking: 0.005em;
  --type-hero-case: uppercase;

  --type-question-size: clamp(24px, 6.5vw, 30px);
  /* Фраза вставки — на ступень мельче вопроса: обводка обходит её по всем
     четырём сторонам, и на кегле вопроса петля ложилась на буквы. Кегль
     один на обе строки — зачёркнутую и обведённую. */
  --type-insight-size: clamp(18px, 4.7vw, 22px);
  --type-question-weight: 600;
  --type-question-line: 1.14;
  --type-question-tracking: 0.01em;
  --type-question-case: uppercase;

  --type-title-size: 17px;
  --type-title-weight: 600;
  --type-title-line: 1.2;
  --type-title-tracking: 0.03em;
  --type-title-case: uppercase;

  --type-body-size: 15px;
  --type-body-weight: 400;
  --type-body-line: 1.5;

  --type-sub-size: 13px;
  --type-sub-weight: 400;
  --type-sub-line: 1.4;

  --type-label-size: 11px;
  --type-label-weight: 700;
  --type-label-line: 1.2;
  --type-label-tracking: 0.1em;
  --type-label-case: uppercase;

  --type-action-size: 14px;
  --type-action-weight: 800;
  --type-action-line: 1.2;
  --type-action-tracking: 0.06em;
  --type-action-case: uppercase;

  /* ── Радиусы ─────────────────────────────────────────────────── */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --radius-none: 0;
  /* Карточка героя (donskih-композиция, DESIGN.md → hero): их скругление
     20px не совпадает ни с одним нашим радиусом — не литерал в screens.css,
     а свой токен, раз он не разовый (та же карточка использует его и на
     четырёх ширинах, и в двух местах — контейнер и картинка внутри). */
  --radius-xl: 20px;

  /* ── Отступы ─────────────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 18px;
  --space-xl: 24px;
  --space-2xl: 34px;
  --space-3xl: 48px;
  --space-4xl: 72px;

  /* ── Тени ────────────────────────────────────────────────────── */
  --shadow-glow: 0 4px 20px rgba(207, 36, 49, 0.3);
  --shadow-lift: 0 8px 40px rgba(0, 0, 0, 0.7);
  --shadow-panel: 0 16px 44px rgba(0, 0, 0, 0.45);

  /* ── Тайминги ────────────────────────────────────────────────── */
  --motion-screen-in: 260ms ease;
  --motion-screen-in-ms: 260ms;
  --motion-select-hold: 300ms;
  --motion-surface: 160ms ease;
  --motion-press: 140ms ease;
  --motion-progress: 400ms ease;
  --motion-mark-draw: 620ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-mark-draw-ms: 620ms;
  --motion-mark-delay: 180ms;
  --motion-photo: 700ms ease;
  --motion-screen-in-rise: 5px;
  --motion-press-scale: 0.98;
  --motion-photo-scale: 1.02;

  /* ── Компоненты (DESIGN.md → components) ─────────────────────── */
  /* Продольная и поперечная составляющие паддинга карточки — отдельными
     токенами, а не только шорткатом: `.look-card__zoom` (лупа поверх
     миниатюры образа, screens.css) вычисляет своё положение через них,
     чтобы совпасть с нижним правым углом миниатюры на любой ширине. */
  --option-card-padding-block: 14px;
  --option-card-padding-inline: 16px;
  --option-card-padding: var(--option-card-padding-block) var(--option-card-padding-inline);
  --option-card-padding-block-narrow: 12px;
  --option-card-padding-inline-narrow: 14px;
  --option-card-padding-narrow: var(--option-card-padding-block-narrow)
    var(--option-card-padding-inline-narrow);
  --option-card-gap: var(--space-md);
  --button-padding: 16px 20px;
  --panel-padding: 22px 20px;
  --panel-frosted-bg: rgba(10, 10, 10, 0.42);
  --panel-frosted-bg-fallback: rgba(10, 10, 10, 0.78);
  --panel-frosted-line: rgba(245, 242, 239, 0.16);
  --panel-frosted-blur: blur(18px) saturate(120%);
  /* Лайтбокс (`ui/kit.js` → `openLightbox`): подложка тёмная независимо
     от текущего поля (`.field-ink`/`.field-bone`/`.field-oxblood`) —
     фото читается только на тёмном грунте. Кнопки стоят прямо на фото
     произвольной яркости (на узкой ширине — почти всегда: стрелки и
     край снимка неизбежно перекрываются), поэтому подложка кнопки —
     та же непрозрачная тёмная плашка `--panel-frosted-bg-fallback`,
     что и у `.look-card__zoom` (screens.css): полупрозрачное белое
     стекло на этом месте проверялось и не читалось на светлых кадрах
     галереи (светлые волосы/кожа `roseGold` съедали контур шеврона). */
  --lightbox-backdrop: rgba(8, 8, 8, 0.94);
  --lightbox-control-bg: var(--panel-frosted-bg-fallback);
  --lightbox-control-bg-hover: var(--color-oxblood);
  --lightbox-control-fg: var(--color-text-on-oxblood);
  --lightbox-control-size: var(--tap-min);
  --interlude-padding: 34px 20px;
  /* Герой-карточка (donskih-композиция): фигура выходит за верхний край
     карточки на кремовое поле — голова и волосы снаружи, тело внутри.
     Карточка — доля высоты фигуры, а не независимый размер: заданная
     отдельно, на каких-то ширинах она обрежет голову или оставит фигуру
     висеть над пустым низом. Соотношение 0.78 — из замера эталона на
     390px (карточка 339px при фигуре 423px ⇒ 0.80), чуть меньше ради
     запаса на других кадрах. Высота фигуры — доля высоты вьюпорта (`dvh`,
     тот же приём, что был у `.hero__photo` раньше): на низких телефонах
     не выталкивает карточку за экран без прокрутки, на высоких не
     остаётся мелкой. */
  --hero-figure-h: clamp(240px, 46dvh, 420px);
  /* Фигура вставки и плашка под ней — тот же приём, что на герое, но
     высота не задана жёстко: сцена вставки забирает остаток высоты экрана
     под собой (`.interlude__stage`, screens.css), поэтому здесь только
     нижняя и верхняя границы этого остатка. Иначе на короткой поддержке
     (две строки вместо пяти) между текстом и плашкой оставалась дыра. */
  --interlude-figure-h-min: clamp(220px, 38dvh, 340px);
  --interlude-figure-h-max: clamp(300px, 58dvh, 520px);
  --hero-card-ratio: 0.78;
  --hero-card-h: calc(var(--hero-figure-h) * var(--hero-card-ratio));
  --input-padding: 14px 48px 14px 14px;
  --input-suffix-inset: 14px;
  --progress-radius: 2px;
  --sub-offset: 2px;

  /* ── Раскладка (DESIGN.md → Layout) ──────────────────────────── */
  --column: 480px;
  --gutter: 16px;
  --header-h: 69px;
  --action-h: 110px;
  --bleed: calc(var(--gutter) * -1);
  --bleed-width: calc(100% + var(--gutter) * 2);

  /* ── Структурные величины, названные в DESIGN.md ─────────────── */
  --hairline: 1px;
  --stroke: 2px;
  --progress-h: 3px;
  --checkbox-size: 20px;
  --callout-dot-size: 3px;
  --thumb-size: 76px;
  --thumb-size-narrow: 60px;
  --tap-min: 44px;
  /* Положение `.look-card__zoom` (screens.css): совпадает с нижним правым
     углом `.option-card__thumb`. Миниатюра на этом экране кадрирована
     4:5 (`.question--photo .option-card__thumb`, screens.css) — высота
     считается от той же ширины `--thumb-size`, поэтому пересчитывается
     сама при переходе на `--thumb-size-narrow` ниже 380px. */
  --look-card-zoom-top: calc(
    var(--option-card-padding-block) + var(--thumb-size) * 5 / 4 - var(--tap-min)
  );
  --look-card-zoom-left: calc(
    var(--option-card-padding-inline) + var(--thumb-size) - var(--tap-min)
  );
  --strip-width: 42%;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-ring-oxblood: rgba(245, 242, 239, 0.9);
  /* Обводка тоньше, чем была (2.5): на кегле фразы прежний штрих читался
     громоздко рядом с буквами. Зачёркивание ещё тоньше — это отменяющая
     пометка, она не должна спорить с обводкой верного утверждения. */
  --mark-stroke-width: 2;
  --mark-stroke-width-strike: 1.5;
  --mark-opacity: 0.9;
  /* Пути маркерных пометок нормированы через pathLength="1". */
  --mark-length: 1;
}

@media (min-width: 768px) {
  :root {
    --header-h: 79px;
  }
}

@media (max-width: 380px) {
  :root {
    --option-card-padding-block: var(--option-card-padding-block-narrow);
    --option-card-padding-inline: var(--option-card-padding-inline-narrow);
    --option-card-padding: var(--option-card-padding-narrow);
    --thumb-size: var(--thumb-size-narrow);
  }
}

/* ── Поля ──────────────────────────────────────────────────────────
   Грунт, текст и границы переключаются вместе. Грамматика компонентов
   не меняется: карточка остаётся той же карточкой во всех трёх полях. */

.field-ink {
  color-scheme: light;
  --field-bg: var(--color-ink);
  --field-raise: var(--color-ink-raise);
  --field-surface: var(--color-card);
  --field-surface-hover: var(--color-card-hover);
  --field-line: var(--color-line);
  --field-line-strong: var(--color-line-strong);
  --field-text: var(--color-text);
  --field-text-muted: var(--color-text-muted);
  --field-text-faint: var(--color-text-faint);
  /* Поле теперь светлое: светлый контур, рассчитанный под тёмное поле,
     на нём не виден — контур ушёл в лак, как на костяном поле (см.
     .field-bone ниже). --focus-ring-oxblood (ниже, в .field-oxblood)
     остаётся нетронутым: он всё ещё нужен единственному тёмному полю. */
  --field-focus: var(--color-lacquer);
  --field-veil: var(--color-veil);
  --field-veil-line: var(--color-veil-line);
  --field-action-bg: var(--color-lacquer);
  --field-action-bg-hover: var(--color-lacquer-hover);
  --field-action-text: var(--color-bone-surface);
  --field-action-shadow: var(--shadow-glow);
}

.field-oxblood {
  color-scheme: dark;
  --field-bg: var(--color-oxblood);
  --field-raise: var(--color-oxblood-deep);
  --field-surface: var(--color-oxblood-deep);
  --field-surface-hover: var(--color-oxblood-deep);
  --field-line: var(--color-text-on-oxblood-muted);
  --field-line-strong: var(--color-text-on-oxblood);
  --field-text: var(--color-text-on-oxblood);
  --field-text-muted: var(--color-text-on-oxblood-muted);
  --field-text-faint: var(--color-text-on-oxblood-muted);
  --field-focus: var(--focus-ring-oxblood);
  --field-veil: rgba(251, 247, 242, 0.1);
  --field-veil-line: rgba(251, 247, 242, 0.24);
  /* Инверсия главной кнопки на оксбладе: костяной фон, оксбладовый текст, без свечения. */
  --field-action-bg: var(--color-bone);
  --field-action-bg-hover: var(--color-bone-hover);
  --field-action-text: var(--color-oxblood);
  --field-action-shadow: none;
}

.field-bone {
  color-scheme: light;
  --field-bg: var(--color-bone);
  --field-raise: var(--color-bone-surface);
  --field-surface: var(--color-bone-surface);
  --field-surface-hover: var(--color-bone-hover);
  --field-line: var(--color-bone-line);
  --field-line-strong: var(--color-text-on-bone-muted);
  --field-text: var(--color-text-on-bone);
  --field-text-muted: var(--color-text-on-bone-muted);
  --field-text-faint: var(--color-text-on-bone-muted);
  --field-focus: var(--color-lacquer);
  --field-veil: rgba(18, 16, 16, 0.05);
  --field-veil-line: rgba(18, 16, 16, 0.12);
  /* На костяном поле главная кнопка остаётся лаковой. */
  --field-action-bg: var(--color-lacquer);
  --field-action-bg-hover: var(--color-lacquer-hover);
  --field-action-text: var(--color-bone-surface);
  --field-action-shadow: var(--shadow-glow);
}