/* ===== SOULSITE — DESIGN TOKENS ===== */
/* Палитра, типографика, ритм. Истина в одном файле. */

:root {
  /* — — — ПАЛИТРА — — — */
  /* Воздух (paper / surface) */
  --paper:        #efe7d7;   /* основная бумажная подложка, тёплая слоновая кость */
  --paper-soft:   #f5efe2;   /* лёгкое деление зон */
  --paper-deep:   #e4dac6;   /* контрастные карточки на бумаге */

  /* Земля (тёмные основы) */
  --ink:          #171614;   /* основной текст, почти чёрный с тёплым подтоном */
  --ink-soft:     #3a352d;   /* вспомогательный текст */
  --ink-mute:     #6f6557;   /* подписи, мета, captions */

  /* Лес (primary глубокий) */
  --forest:       #1f3a2e;   /* primary brand — глубокий зелёный */
  --forest-soft:  #2e5240;
  --forest-deep:  #142620;

  /* Глина (warm secondary) */
  --clay:         #6e5d48;   /* тёплый коричневый, опционально */
  --clay-soft:    #8c7a63;

  /* Уголь (нейтральный темный) */
  --char:         #2a2724;   /* графит, альтернативный темный */

  /* Огонь (accent — единственный яркий) */
  --ember:        #b85c3f;   /* терракот, главный акцент */
  --ember-deep:   #934426;
  --ember-soft:   #d68463;

  /* Утилитарные */
  --line:         #c8bfa9;   /* линии, рамки на бумаге */
  --line-soft:    #d9d0bb;
  --line-deep:    #58503f;   /* линии на тёмном */
  --shadow:       0 1px 0 rgba(23,22,20,.08), 0 24px 48px -24px rgba(23,22,20,.18);

  /* — — — ТИПОГРАФИКА — — — */
  --serif: "Fraunces", "EB Garamond", Georgia, serif;
  --sans:  "Inter", "Manrope", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Лестница размеров (web) */
  --t-mega:   clamp(72px, 11vw, 168px);   /* manifesto, hero phrases */
  --t-h1:     clamp(48px, 6.4vw, 96px);
  --t-h2:     clamp(36px, 4.4vw, 64px);
  --t-h3:     clamp(28px, 2.8vw, 40px);
  --t-h4:     22px;
  --t-lead:   clamp(20px, 1.5vw, 24px);
  --t-body:   17px;
  --t-small:  14px;
  --t-mono:   12px;

  /* Ритм */
  --line-tight:   1.04;
  --line-snug:    1.18;
  --line-normal:  1.45;
  --line-loose:   1.65;

  --track-tight:   -0.02em;
  --track-normal:  0;
  --track-mono:    0.08em;
  --track-caps:    0.14em;

  /* Грид и воздух */
  --col: 12;
  --gutter: 24px;
  --max:    1320px;
  --pad-x:  clamp(20px, 4vw, 64px);
  --pad-section: clamp(80px, 9vw, 160px);

  /* Скругления — минимальные. Бренд не любит «округлое». */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
}

/* — — — БАЗА — — — */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--line-normal);
  font-feature-settings: "ss01", "cv11", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--track-tight);
  line-height: var(--line-tight);
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--ember); color: var(--paper); }

/* — — — УТИЛИТЫ — — — */
.wrap   { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-tight { max-width: 980px; margin: 0 auto; padding: 0 var(--pad-x); }
.grid   { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

.section { padding-top: var(--pad-section); padding-bottom: var(--pad-section); }
.section-tight { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--ink-mute);
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.lead {
  font-size: var(--t-lead);
  line-height: var(--line-loose);
  color: var(--ink-soft);
  max-width: 64ch;
}

.serif { font-family: var(--serif); }
.sans  { font-family: var(--sans); }
.mono  { font-family: var(--mono); }
.italic { font-style: italic; }

.ember { color: var(--ember); }
.forest { color: var(--forest); }
.mute   { color: var(--ink-mute); }

.divider { height: 1px; background: var(--line); margin: 0; }
.divider-thick { height: 1px; background: var(--line-deep); }

/* Карточки */
.card {
  background: var(--paper-soft);
  border: 1px solid var(--line-soft);
  padding: 28px;
}
.card-ink {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.card-forest {
  background: var(--forest);
  color: var(--paper);
  border: 1px solid var(--forest-deep);
}

/* Inline-теги для do/don't */
.tag-yes, .tag-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.tag-yes { color: var(--forest); }
.tag-no  { color: var(--ember-deep); }
.tag-yes::before { content: "✓"; }
.tag-no::before  { content: "✕"; }

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--forest); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-arrow::after { content: "→"; }

/* Помощник: вертикальная линия с засечкой */
.notch {
  position: relative;
  padding-left: 24px;
}
.notch::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line-deep);
}