/* СТОРИАРТ — дизайн-токены (CSS). Палитра «Уголь и терракота», типографика Onest. 05.10.2026.
   Источник значений — tokens.json. Подключи шрифт Onest (Google Fonts, SIL OFL 1.1). */

:root {
  /* --- Нейтральная основа --- */
  --sa-white: #FFFFFF;
  --sa-black: #000000;
  --sa-paper: #F4F1EA;   /* фон, воздух */
  --sa-line: #DCD5C7;    /* линии, разделители */
  --sa-muted: #7E7666;   /* вторичный текст */
  --sa-ink: #24211C;     /* структура, текст, знак */
  --sa-accent: #C0603C;  /* действие: CTA, активный модуль */

  /* --- Семантика --- */
  --sa-text-primary: var(--sa-ink);
  --sa-text-secondary: var(--sa-muted);
  --sa-text-inverse: var(--sa-paper);
  --sa-bg-default: var(--sa-paper);
  --sa-bg-surface: var(--sa-white);
  --sa-bg-inverse: var(--sa-ink);
  --sa-border: var(--sa-line);
  --sa-action: var(--sa-accent);
  --sa-action-on: var(--sa-white);

  /* --- Шрифт --- */
  --sa-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sa-weight-regular: 400;
  --sa-weight-medium: 500;
  --sa-weight-semibold: 600;

  /* --- Кегли --- */
  --sa-text-display: 48px;
  --sa-text-h1: 38px;
  --sa-text-h2: 30px;
  --sa-text-h3: 24px;
  --sa-text-h4: 20px;
  --sa-text-lead: 19px;
  --sa-text-body: 16px;
  --sa-text-body-sm: 14px;
  --sa-text-caption: 13px;
  --sa-text-overline: 12px;
  --sa-text-button: 15px;

  /* --- Интерлиньяж --- */
  --sa-lh-display: 1.1;
  --sa-lh-heading: 1.15;
  --sa-lh-h2: 1.2;
  --sa-lh-h3: 1.25;
  --sa-lh-h4: 1.3;
  --sa-lh-lead: 1.5;
  --sa-lh-body: 1.55;
  --sa-lh-caption: 1.4;

  /* --- Трекинг --- */
  --sa-ls-display: -0.02em;
  --sa-ls-h1: -0.015em;
  --sa-ls-h2: -0.01em;
  --sa-ls-h3: -0.005em;
  --sa-ls-none: 0em;
  --sa-ls-caption: 0.01em;
  --sa-ls-button: 0.02em;
  --sa-ls-overline: 0.08em;

  /* --- Радиусы --- */
  --sa-radius-sm: 6px;
  --sa-radius-md: 10px;
  --sa-radius-lg: 16px;
  --sa-radius-pill: 999px;

  /* --- Шаг сетки --- */
  --sa-space-1: 4px;
  --sa-space-2: 8px;
  --sa-space-3: 12px;
  --sa-space-4: 16px;
  --sa-space-5: 24px;
  --sa-space-6: 32px;
  --sa-space-7: 48px;
  --sa-space-8: 64px;
}

/* --- Текстовые стили --- */
.sa-display, .sa-h1, .sa-h2, .sa-h3, .sa-h4, .sa-lead,
.sa-body, .sa-body-sm, .sa-caption, .sa-overline, .sa-button {
  font-family: var(--sa-font);
  margin: 0;
}

.sa-display { font-size: var(--sa-text-display); font-weight: var(--sa-weight-semibold); line-height: var(--sa-lh-display); letter-spacing: var(--sa-ls-display); }
.sa-h1      { font-size: var(--sa-text-h1);      font-weight: var(--sa-weight-semibold); line-height: var(--sa-lh-heading); letter-spacing: var(--sa-ls-h1); }
.sa-h2      { font-size: var(--sa-text-h2);      font-weight: var(--sa-weight-semibold); line-height: var(--sa-lh-h2); letter-spacing: var(--sa-ls-h2); }
.sa-h3      { font-size: var(--sa-text-h3);      font-weight: var(--sa-weight-semibold); line-height: var(--sa-lh-h3); letter-spacing: var(--sa-ls-h3); }
.sa-h4      { font-size: var(--sa-text-h4);      font-weight: var(--sa-weight-medium);   line-height: var(--sa-lh-h4); letter-spacing: var(--sa-ls-none); }
.sa-lead    { font-size: var(--sa-text-lead);    font-weight: var(--sa-weight-regular);  line-height: var(--sa-lh-lead); letter-spacing: var(--sa-ls-none); }
.sa-body    { font-size: var(--sa-text-body);    font-weight: var(--sa-weight-regular);  line-height: var(--sa-lh-body); letter-spacing: var(--sa-ls-none); max-width: 66ch; }
.sa-body-sm { font-size: var(--sa-text-body-sm); font-weight: var(--sa-weight-regular);  line-height: var(--sa-lh-lead); letter-spacing: var(--sa-ls-none); }
.sa-caption { font-size: var(--sa-text-caption); font-weight: var(--sa-weight-medium);   line-height: var(--sa-lh-caption); letter-spacing: var(--sa-ls-caption); color: var(--sa-text-secondary); }
.sa-overline{ font-size: var(--sa-text-overline);font-weight: var(--sa-weight-semibold); line-height: var(--sa-lh-h2); letter-spacing: var(--sa-ls-overline); text-transform: uppercase; color: var(--sa-action); }
.sa-button  { font-size: var(--sa-text-button);  font-weight: var(--sa-weight-semibold); line-height: var(--sa-lh-h2); letter-spacing: var(--sa-ls-button); }

/* --- Готовые элементы --- */
.sa-btn {
  display: inline-block;
  font: var(--sa-weight-semibold) var(--sa-text-button)/var(--sa-lh-h2) var(--sa-font);
  letter-spacing: var(--sa-ls-button);
  background: var(--sa-action);
  color: var(--sa-action-on);
  border: 0;
  border-radius: var(--sa-radius-md);
  padding: var(--sa-space-3) var(--sa-space-5);
  cursor: pointer;
}
.sa-btn--ghost {
  background: transparent;
  color: var(--sa-ink);
  border: 1.5px solid var(--sa-ink);
}

/* --- Адаптив для крупного текста (веб) --- */
@media (max-width: 720px) {
  .sa-display { font-size: clamp(32px, 9vw, 48px); }
  .sa-h1      { font-size: clamp(28px, 7vw, 38px); }
  .sa-h2      { font-size: clamp(24px, 6vw, 30px); }
}