/* Сайт «Опоры». Цвета, отступы, скругления, тени и шрифт — только var(--opora-…) из ds/tokens.css (сборка кладёт его
 * рядом как /assets/tokens.css + тёмный режим по prefers-color-scheme). Ни одного hex/rgb/hsl здесь — сторож
 * tests/guards.test.mjs. Цели касания ≥ var(--opora-size-touch). Без inline-стилей: CSP style-src 'self'. */

@font-face {
  font-family: "Onest";
  src: url("/fonts/Onest-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--opora-font);
  color: var(--opora-text-primary);
  background: var(--opora-bg-canvas);
  background-image: linear-gradient(180deg, var(--opora-bg-canvas-alt) 0%, var(--opora-bg-canvas) 50%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: center;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
a { color: var(--opora-text-accent); }
.muted { color: var(--opora-text-secondary); }
.tertiary { color: var(--opora-text-tertiary); }
.stack { display: flex; flex-direction: column; gap: var(--opora-space-12); }

.skip {
  position: absolute; left: var(--opora-space-8); top: calc(-1 * var(--opora-space-48));
  padding: var(--opora-space-8) var(--opora-space-12);
  background: var(--opora-bg-surface); border-radius: var(--opora-radius-sm);
}
.skip:focus { top: var(--opora-space-8); }

/* Шапка и подвал */
.site-header, .page, .site-footer { width: 100%; max-width: 560px; padding: 0 var(--opora-space-16); }
.site-header { padding-top: max(var(--opora-space-16), env(safe-area-inset-top)); min-height: calc(var(--opora-size-touch) + var(--opora-space-16)); display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: var(--opora-space-8); color: var(--opora-text-primary); text-decoration: none; min-height: var(--opora-size-touch); }
.brand img { display: block; }
.page { flex: 1; display: flex; flex-direction: column; gap: var(--opora-space-16); padding-top: var(--opora-space-16); padding-bottom: var(--opora-space-32); }
.site-footer { display: flex; flex-direction: column; gap: var(--opora-space-8); padding-bottom: max(var(--opora-space-24), env(safe-area-inset-bottom)); color: var(--opora-text-secondary); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--opora-space-4) var(--opora-space-16); }
.footer-links a { color: var(--opora-text-secondary); display: inline-flex; align-items: center; min-height: var(--opora-size-touch); }

/* Карточки: стекло из токенов (.glass задан в tokens.css) */
.card, .plan { border-radius: var(--opora-radius-xl); padding: var(--opora-space-20); }
.card-danger { background: var(--opora-bg-danger-soft); border: var(--opora-stroke-hairline) solid var(--opora-border-danger); }
.sos-number { color: var(--opora-text-danger); font-weight: 600; }
.note { color: var(--opora-text-secondary); }
.banner {
  align-self: flex-start;
  padding: var(--opora-space-8) var(--opora-space-12);
  border-radius: var(--opora-radius-full);
  background: var(--opora-bg-warning);
  color: var(--opora-text-on-warning);
}

/* Главная */
.hero { border-radius: var(--opora-radius-xl); padding: var(--opora-space-32) var(--opora-space-20); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--opora-space-12); }
.hero-mark { display: block; }
.facts { padding-left: var(--opora-space-20); display: flex; flex-direction: column; gap: var(--opora-space-8); }

/* Кнопки (Button Primary · Glass · Outline из ДС) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--opora-size-touch);
  padding: var(--opora-space-12) var(--opora-space-20);
  border-radius: var(--opora-radius-full);
  border: var(--opora-stroke-hairline) solid transparent;
  font: 500 15px/20px var(--opora-font);
  text-decoration: none; cursor: pointer;
  width: 100%;
}
.btn-l { min-height: 52px; font-size: 16px; }
.btn-primary { background: var(--opora-bg-accent); color: var(--opora-text-on-accent); box-shadow: var(--opora-shadow-floating); }
.btn-glass { background: var(--opora-bg-glass-strong); color: var(--opora-text-primary); border-color: var(--opora-border-glass); }
.btn-outline { background: transparent; color: var(--opora-text-accent); border-color: var(--opora-border-strong); }
.btn:focus-visible, .input:focus-visible, .switch:focus-visible, a:focus-visible { outline: 2px solid var(--opora-border-strong); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.link { color: var(--opora-text-accent); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; }
a.link.t-label-l { min-height: var(--opora-size-touch); text-decoration: none; }

/* Тарифы */
.plans { display: flex; flex-direction: column; gap: var(--opora-space-12); }
.plan { display: flex; flex-direction: column; gap: var(--opora-space-8); }
.plan-main { border: 2px solid var(--opora-border-strong); box-shadow: var(--opora-glow-accent), var(--opora-shadow-glass-card); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--opora-space-8); flex-wrap: wrap; }
.tag {
  padding: var(--opora-space-4) var(--opora-space-12);
  border-radius: var(--opora-radius-full);
  background: var(--opora-bg-accent-soft);
  color: var(--opora-text-accent);
}
.plan-price { display: flex; align-items: baseline; gap: var(--opora-space-8); flex-wrap: wrap; }
.plan-lines { padding-left: var(--opora-space-20); display: flex; flex-direction: column; gap: var(--opora-space-4); color: var(--opora-text-secondary); }
.plan .btn { margin-top: var(--opora-space-8); }

/* Оформление */
.input {
  width: 100%;
  min-height: var(--opora-size-touch);
  padding: var(--opora-space-12) var(--opora-space-16);
  border-radius: var(--opora-radius-md);
  border: var(--opora-stroke-hairline) solid var(--opora-border-default);
  background: var(--opora-bg-surface);
  color: var(--opora-text-primary);
}
.field-error { color: var(--opora-text-danger); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--opora-space-16); cursor: pointer; min-height: var(--opora-size-touch); }
.switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 52px; height: 32px; border-radius: var(--opora-radius-full);
  background: var(--opora-border-default);
  position: relative; cursor: pointer;
  transition: background 0.15s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: var(--opora-radius-full);
  background: var(--opora-bg-knob); box-shadow: var(--opora-shadow-glass-card);
  transition: transform 0.15s ease;
}
.switch:checked { background: var(--opora-bg-accent); }
.switch:checked::after { transform: translateX(20px); }

/* Итог оплаты */
.result { align-items: center; text-align: center; }
.result-mark {
  width: 56px; height: 56px; border-radius: var(--opora-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600;
}
.result-ok { background: var(--opora-bg-accent-soft); color: var(--opora-text-accent); }
.result-fail { background: var(--opora-bg-danger-soft); color: var(--opora-text-danger); }
.spinner { border: 3px solid var(--opora-border-default); border-top-color: var(--opora-bg-accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } .switch, .switch::after { transition: none; } }

/* Документы */
.rows { display: flex; flex-direction: column; gap: var(--opora-space-8); }
.rows div { display: flex; justify-content: space-between; gap: var(--opora-space-12); border-top: var(--opora-stroke-hairline) solid var(--opora-border-default); padding-top: var(--opora-space-8); }
.rows dt { color: var(--opora-text-secondary); }
.rows dd { font-weight: 500; text-align: right; }

@media (min-width: 720px) {
  .site-header, .page, .site-footer { max-width: 640px; }
}