/*
 * Лендинг и справка «Арены переговоров» (DRE-120): токены, шрифты и основа страницы.
 * Токены и числа — те же, что у продукта (src/app/globals.css, DESIGN.md, DRE-102);
 * новые токены лендинга (подвал, метки состояния) — в спеке DRE-120 с контрастом.
 * Цвета текста и фона текста — непрозрачные токены.
 */
:root {
  color-scheme: light dark;

  /* Цвета бренда: одинаковы в обеих темах. */
  --color-navy: #1f235c;
  --color-indigo: #2f3488;
  --color-deep: #00285e;
  --color-night: #0e2156;
  --color-sky: #33a2dc;
  --color-sky-light: #7ebcf1;
  --color-pill-from: #137ab8;
  --color-pill-to: #0c5ee4;
  --color-card-from: #007caa;
  --color-card-to: #0c5ee4;

  /* Смысловые токены светлой темы; тёмная тема — ниже. */
  --color-field: #f4f6fa;
  --color-plate: #ffffff;
  --color-heading: #1f235c;
  --color-text: #1a1a1a;
  --color-lead: #2f3488;
  --color-menu: #1f235c;
  --color-focus: #1f235c;
  --color-outline: #1f235c;
  --color-scrim: rgb(14 33 86 / 0.45);
  --color-rule: #d3dbe7;
  --color-tint: #dde7f3;

  /* Подвал: тёмно-синяя плашка в обеих темах. */
  --color-footer: #1f235c;
  --color-footer-text: #e6ecf7;
  --color-footer-lead: #bfd9f6;

  --font-text:
    "Jost", "Century Gothic", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-pill: 20px;
  --radius-plate: 10px;

  --shadow-plate: 0 6px 24px rgb(31 35 92 / 0.12);
  --shadow-plate-raised: 0 10px 32px rgb(31 35 92 / 0.22);
  --shadow-pill: 0 8px 20px rgb(12 94 228 / 0.35);
  --shadow-pill-quiet: 0 8px 20px rgb(31 35 92 / 0.16);

  --duration-fast: 180ms;
  --duration-medium: 320ms;
  --duration-slow: 640ms;
  --stagger-step: 80ms;
  --enter-distance: 24px;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);

  --header-space: 88px;
}

/* Тёмная тема по настройке системы, как в продукте: те же формы на цветах бренда. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-field: #0e2156;
    --color-plate: #00285e;
    --color-heading: #ffffff;
    --color-text: #e6ecf7;
    --color-lead: #bfd9f6;
    --color-menu: #e6ecf7;
    --color-focus: #7ebcf1;
    --color-outline: #7ebcf1;
    --color-scrim: rgb(0 0 0 / 0.55);
    --color-rule: #23427f;
    --color-tint: #1d4486;
    --color-footer: #00285e;

    --shadow-plate: 0 6px 24px rgb(0 0 0 / 0.35);
    --shadow-plate-raised: 0 10px 32px rgb(0 0 0 / 0.5);
    --shadow-pill-quiet: 0 8px 20px rgb(0 0 0 / 0.35);
  }
}

/* Шрифты — свои файлы (ADR 0010, OFL 1.1), без внешних запросов. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/jost-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/playfair-display-cyrillic-wght-normal.woff2")
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/playfair-display-cyrillic-wght-italic.woff2")
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Элемент в фокусе и цель якоря не прячутся под шапкой (WCAG 2.2, 2.4.11). */
  scroll-padding-top: var(--header-space);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-field);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  font-synthesis: none;
  /* Прописные цифры везде: старостильные цифры Playfair Display прыгают по высоте. */
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

::selection {
  background-color: var(--color-sky-light);
  color: var(--color-navy);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Переход к содержимому: виден только в фокусе с клавиатуры. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--radius-plate);
  background-color: var(--color-plate);
  color: var(--color-heading);
  font-weight: 700;
  box-shadow: var(--shadow-plate-raised);
  transform: translateY(-160%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Метка состояния функции: «готово» — плотная, «в разработке» — пунктирная. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.15em;
}

.status[data-status="ready"] {
  background-color: var(--color-sky-light);
  color: var(--color-navy);
}

.status[data-status="dev"] {
  border-color: var(--color-lead);
  border-style: dashed;
  color: var(--color-lead);
}

.status svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* Только для диктора. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1024px) {
  :root {
    --header-space: 104px;
  }
}