/* Дизайн-система: типографика заголовков, кнопки.
   Цвета/размеры/радиусы берутся из css/tokens.css. Подключается после tokens.css, перед index.css. */

/* --- Заголовки --- */
h1, h2, h3, h4, .brand-name, .display {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -.02em;
  color: var(--text-1);
}
h1, h2, h3, h4 { line-height: var(--lh-tight); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.display {
  font-weight: 500;
  font-size: var(--fs-page-title);
  line-height: var(--lh-tight);
  max-width: 980px;
}
.display em { font-style: italic; color: var(--accent); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .85;
}

/* Заголовки секций внутри карточек — единый вид по токенам, чтобы новые блоки
   не изобретали свой размер. Отступы/раскладка остаются локальными у каждого блока. */
.cab-panel-head h3,
.pp2-head h3, .di-grid .card h3, .pp-theme-card h3, .tx-locked h3, .di-care-layer h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 650;
  line-height: 1.05;
  color: var(--text-1);
}
.pai-head h4, .tr-side h4, .cmp-zone h4, .pai-card h4, .di-topic h4, .tx-feedback h4 {
  font-family: var(--font-display);
  font-size: var(--fs-card-subtitle);
  font-weight: 650;
  line-height: 1.3;
  color: var(--text-1);
}
.site-modal-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-modal-title);
  font-weight: 650;
  line-height: 1.05;
  color: var(--text-1);
}

/* ---------- Кнопки ---------- */
.btn {
  --btn-bg: var(--bg-3);
  --btn-fg: var(--text-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
}
.btn:hover { transform: translateY(-1px); border-color: var(--text-3); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn-icon { width: 38px; height: 38px; padding: 0; }
.btn-block { width: 100%; }

/* кнопки */
.btn{ font-family:var(--font-ui); font-weight:600; border-radius:var(--r-md); transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease); }
.btn-primary{ background:var(--accent); color:var(--bg-2); border:0; }
.btn-primary:not(.di-ai-action){ box-shadow:var(--shadow-glow); }
.btn-primary:hover{ background:var(--coral-d); transform:translateY(-2px); }
.btn-secondary{ background:var(--indigo); color:var(--bg-2); border:0; }
.btn-secondary:hover{ background:var(--indigo-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--text-1); border:1.5px solid var(--line-strong); }
.btn-ghost:hover{ background:var(--peri-soft); border-color:var(--indigo); }
.btn-icon{ color:var(--text-1); }