/* Заглушка сайта snipp.ist по дизайн-системе приложения (docs/design/SNIPPIST-DESIGN-SYSTEM.md, §5–§8, §12).
   Дизайн главной рисуется отдельно; этот файл заменяется вместе с разметкой, контракт формы описан в site/README.md.
   @spec spec://modules/experience/FEAT-004-account-and-service-screens#scenarios.legal */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-VF.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg-canvas: #F7F6F2;
  --bg-surface: #FFFFFF;
  --bg-subtle: #EFEEE9;
  --text-primary: #0B0C0E;
  --text-secondary: #60636B;
  --text-tertiary: #8C8E94;
  --text-accent: #0060FF;
  --action-fill: #0B0C0E;
  --action-text: #F7F6F2;
  --divider: rgba(11, 12, 14, 0.12);
  --divider-strong: rgba(11, 12, 14, 0.22);
  --selection-fill: #E3EDFF;
  --success: #167A46;
  --danger: #C4321F;
  --radius-m: 14px;
  --radius-l: 18px;
  --gutter: 20px;
  --measure: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas: #0D0E11;
    --bg-surface: #14161A;
    --bg-subtle: #1B1D22;
    --text-primary: #F7F6F2;
    --text-secondary: #B8BBC2;
    --text-tertiary: #7C8089;
    --text-accent: #4D8FFF;
    --action-fill: #F7F6F2;
    --action-text: #0B0C0E;
    --divider: rgba(247, 246, 242, 0.12);
    --divider-strong: rgba(247, 246, 242, 0.22);
    --selection-fill: #0B2A66;
    --success: #62D894;
    --danger: #FF7A66;
  }
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: 400 16px/22px "Instrument Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--wide { max-width: 1040px; }

/* Шапка и подвал */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
.bar a { color: var(--text-primary); text-decoration: none; }
.brand { font-weight: 600; font-size: 20px; letter-spacing: -0.012em; }
.bar nav { display: flex; gap: 20px; font-size: 14px; }
.bar nav a { color: var(--text-secondary); }
.bar nav a:hover { color: var(--text-primary); }

footer { margin-top: 96px; padding: 28px 0 48px; border-top: 1px solid var(--divider); color: var(--text-secondary); font-size: 14px; line-height: 19px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--text-secondary); }
footer a:hover { color: var(--text-primary); }

/* Типографика: заголовки по шкале §6.3 */
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: clamp(40px, 9vw, 56px); line-height: 1.02; letter-spacing: -0.04em; }
h2 { font-size: 32px; line-height: 34px; letter-spacing: -0.025em; }
h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.012em; }
p { margin: 0; }
.lede { font-size: 18px; line-height: 25px; letter-spacing: -0.006em; color: var(--text-secondary); }
.caption { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.008em; color: var(--text-tertiary); }

/* Главная */
.hero { padding: 56px 0 8px; }
.hero h1 { max-width: 12em; }
.hero .lede { margin-top: 20px; max-width: 34em; }

.steps { list-style: none; margin: 72px 0 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; gap: 6px; padding: 20px; background: var(--bg-surface); border: 1px solid var(--divider); border-radius: var(--radius-m); }
.steps .num { color: var(--text-accent); font-weight: 600; font-size: 14px; }
.steps p { color: var(--text-secondary); font-size: 14px; line-height: 19px; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.launch { margin-top: 72px; padding: 28px 24px; background: var(--bg-surface); border: 1px solid var(--divider); border-radius: var(--radius-m); display: grid; gap: 16px; }

/* Форма пре-лаунча */
.waitlist { margin-top: 32px; display: grid; gap: 12px; max-width: 460px; }
.waitlist label.field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.waitlist input[type="email"] {
  width: 100%; min-height: 52px; padding: 0 16px;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--divider-strong); border-radius: var(--radius-l);
  font: inherit;
}
.waitlist input[type="email"]::placeholder { color: var(--text-tertiary); }
.waitlist input[type="email"][aria-invalid="true"] { border-color: var(--danger); }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 19px; color: var(--text-secondary); }
.consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--text-accent); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 20px; border: 0; border-radius: var(--radius-l);
  background: var(--action-fill); color: var(--action-text);
  font: 600 16px/20px "Instrument Sans", system-ui, sans-serif; letter-spacing: -0.006em;
  text-decoration: none; cursor: pointer;
}
.button:disabled { opacity: 0.5; cursor: default; }
.button--secondary { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--divider-strong); }

.status { min-height: 22px; font-size: 14px; line-height: 19px; }
.status[data-tone="ok"] { color: var(--success); }
.status[data-tone="error"] { color: var(--danger); }
.status[data-tone="info"] { color: var(--text-secondary); }

/* Правовые страницы и страницы-сообщения */
.doc { padding-top: 40px; }
.doc h1 { font-size: clamp(32px, 7vw, 40px); line-height: 1.05; letter-spacing: -0.032em; }
.doc .updated { margin-top: 12px; }
.doc .lede { margin-top: 16px; }
.doc h2 { margin-top: 48px; font-size: 24px; line-height: 28px; letter-spacing: -0.018em; }
.doc h3 { margin-top: 28px; }
.doc p, .doc ul, .doc ol, .doc table { margin-top: 12px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-top: 6px; }
.doc li > ul { margin-top: 6px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 19px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--divider); }
.doc th { color: var(--text-secondary); font-weight: 600; }
.table-scroll { overflow-x: auto; }
/* @spec spec://modules/experience/FEAT-004-account-and-service-screens#scenarios.legal */
.doc #data-recipients { min-width: 760px; }
.doc #data-recipients th:first-child { width: 20%; }
.doc #data-recipients th:nth-child(2), .doc #data-recipients th:nth-child(3) { width: 40%; }
.draft {
  margin-top: 24px; padding: 16px 18px; border-radius: var(--radius-m);
  background: var(--selection-fill); border: 1px solid var(--text-accent);
  font-size: 14px; line-height: 19px;
}
.draft strong { font-weight: 600; }
.todo {
  padding: 1px 6px; border-radius: 6px; background: rgba(255, 176, 0, 0.22);
  border: 1px dashed #B87F00; font-weight: 500;
}
.message { padding-top: 96px; }
.message .lede { margin-top: 16px; }
.message .button { margin-top: 32px; }