/* ============================================================
   ПЛАН ПИТАНИЯ — Бренд-CSS-набор (pp-brand.css)
   Единый дизайн-язык: облагороженная зелень + лаймовый pop,
   тёплый кремовый фон, Onest + Golos Text.
   Подключение:
     <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Golos+Text:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="pp-brand.css">
   ============================================================ */

:root {
  /* — Текст — */
  --pp-ink:        #1b2620;
  --pp-ink-soft:   #525e56;
  --pp-muted:      #8a938c;
  --pp-faint:      #aeb4ad;

  /* — Бренд — */
  --pp-accent:     #1c5f43;   /* глубокая зелень — основной */
  --pp-accent-ink: #134731;   /* hover / тёмный текст бренда */
  --pp-accent-soft:#e9f1ec;   /* мягкий зелёный тинт */
  --pp-accent-bar: #2a7a59;
  --pp-pop:        #a6e15a;   /* яркий лайм — CTA, акценты */
  --pp-pop-ink:    #1c3a12;   /* тёмный текст на лайме */

  /* — Поверхности — */
  --pp-page:       #f3f3ef;   /* тёплый фон */
  --pp-page-2:     #ecebe4;
  --pp-surface:    #ffffff;
  --pp-line:       #ebeae4;
  --pp-line-soft:  #f1f0ea;
  --pp-ink-bg:     #14211a;   /* тёмная секция (футер/hero-инверсия) */

  /* — Макросы (КБЖУ) — */
  --pp-protein:    #cf6b43;
  --pp-fat:        #e3ae39;
  --pp-carb:       #7fa64a;

  /* — Радиусы — */
  --pp-r-xs: 8px;
  --pp-r-sm: 11px;
  --pp-r-md: 14px;
  --pp-r-lg: 18px;
  --pp-r-xl: 24px;
  --pp-r-pill: 999px;

  /* — Тени (тёплые, мягкие) — */
  --pp-sh-sm: 0 1px 2px rgba(27,38,32,.05), 0 1px 3px rgba(27,38,32,.04);
  --pp-sh-md: 0 4px 18px rgba(27,38,32,.07), 0 1px 4px rgba(27,38,32,.04);
  --pp-sh-lg: 0 16px 44px rgba(27,38,32,.12), 0 4px 12px rgba(27,38,32,.06);

  /* — Шрифты — */
  --pp-font-display: 'Onest', system-ui, -apple-system, sans-serif;
  --pp-font-body:    'Golos Text', system-ui, -apple-system, sans-serif;
}

/* ── Сброс / база ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
.pp, .pp * { -webkit-font-smoothing: antialiased; }
body.pp {
  margin: 0; font-family: var(--pp-font-body); color: var(--pp-ink);
  background: var(--pp-page); line-height: 1.5;
}
.pp-num { font-variant-numeric: tabular-nums; }

/* ── Типографика ───────────────────────────────────────────── */
.pp-display { font-family: var(--pp-font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.pp-h1 { font-family: var(--pp-font-display); font-weight: 700; font-size: clamp(30px, 6vw, 52px); letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
.pp-h2 { font-family: var(--pp-font-display); font-weight: 700; font-size: clamp(24px, 4vw, 36px); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.pp-h3 { font-family: var(--pp-font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.pp-lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--pp-ink-soft); line-height: 1.55; }
.pp-eyebrow { font-family: var(--pp-font-body); font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-accent); }
.pp-accent-text { color: var(--pp-accent); }

/* ── Кнопки ────────────────────────────────────────────────── */
.pp-btn {
  font-family: var(--pp-font-body); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--pp-r-pill); border: none;
  cursor: pointer; transition: filter .15s ease, transform .1s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.pp-btn:active { transform: scale(.98); }
.pp-btn-pop { background: var(--pp-pop); color: var(--pp-pop-ink); font-weight: 700; }
.pp-btn-pop:hover { filter: brightness(.94); }
.pp-btn-primary { background: var(--pp-accent); color: #fff; box-shadow: 0 2px 8px rgba(28,95,67,.2); }
.pp-btn-primary:hover { background: var(--pp-accent-ink); }
.pp-btn-outline { background: transparent; color: var(--pp-accent); box-shadow: inset 0 0 0 1.5px var(--pp-line); }
.pp-btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--pp-accent); background: var(--pp-accent-soft); }
.pp-btn-ghost { background: transparent; color: var(--pp-ink-soft); }
.pp-btn-ghost:hover { background: var(--pp-page-2); }
.pp-btn-lg { padding: 16px 30px; font-size: 17px; }
.pp-btn-sm { padding: 9px 16px; font-size: 13.5px; }
.pp-btn-block { display: flex; width: 100%; }
.pp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

/* ── Чипы / бэйджи ─────────────────────────────────────────── */
.pp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--pp-ink-soft);
  background: var(--pp-surface); border: 1px solid var(--pp-line);
  padding: 7px 14px; border-radius: var(--pp-r-pill); cursor: pointer;
}
.pp-chip.is-active { background: var(--pp-accent); color: #fff; border-color: var(--pp-accent); }
.pp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: var(--pp-r-pill);
  background: var(--pp-accent-soft); color: var(--pp-accent-ink);
}
.pp-tag-pop { background: var(--pp-pop); color: var(--pp-pop-ink); }

/* ── Карточки ──────────────────────────────────────────────── */
.pp-card {
  background: var(--pp-surface); border-radius: var(--pp-r-lg);
  border: 1px solid var(--pp-line); box-shadow: var(--pp-sh-sm);
}
.pp-card-pad { padding: 22px 24px; }

/* ── Поля форм ─────────────────────────────────────────────── */
.pp-field { margin-bottom: 18px; }
.pp-label { display: block; font-size: 13px; font-weight: 500; color: var(--pp-ink-soft); margin-bottom: 8px; }
.pp-input, .pp-select {
  width: 100%; background: var(--pp-surface); border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-sm); padding: 13px 14px;
  font-family: var(--pp-font-body); font-size: 15.5px; color: var(--pp-ink);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none; -webkit-appearance: none;
}
.pp-input::placeholder { color: var(--pp-faint); }
.pp-input:focus, .pp-select:focus { border-color: var(--pp-accent); box-shadow: 0 0 0 3px var(--pp-accent-soft); }
.pp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a938c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 40px;
}

/* Сегментный переключатель */
.pp-seg { display: flex; gap: 6px; }
.pp-seg button {
  flex: 1; min-height: 46px; border: 1px solid var(--pp-line); border-radius: var(--pp-r-sm);
  background: var(--pp-surface); font-family: var(--pp-font-body); font-size: 14px; font-weight: 500;
  color: var(--pp-ink-soft); cursor: pointer; transition: all .14s ease;
}
.pp-seg button:hover { border-color: var(--pp-faint); }
.pp-seg button.is-active { background: var(--pp-accent); border-color: var(--pp-accent); color: #fff; font-weight: 600; }

/* Чекбокс */
.pp-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.pp-check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--pp-accent); cursor: pointer; }
.pp-check span { font-size: 14px; color: var(--pp-ink-soft); line-height: 1.5; }
.pp-check a { color: var(--pp-accent); }

/* ── Макро-индикаторы ──────────────────────────────────────── */
.pp-macro { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.pp-macro .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pp-macro.protein .dot { background: var(--pp-protein); }
.pp-macro.fat .dot     { background: var(--pp-fat); }
.pp-macro.carb .dot    { background: var(--pp-carb); }

/* Прогресс-трек */
.pp-track { height: 7px; border-radius: var(--pp-r-pill); background: var(--pp-page-2); overflow: hidden; }
.pp-track > i { display: block; height: 100%; border-radius: inherit; background: var(--pp-accent); }

/* ── Логотип-знак ──────────────────────────────────────────── */
.pp-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.pp-logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--pp-accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pp-logo-mark svg { width: 20px; height: 20px; display: block; }
.pp-logo-name { font-family: var(--pp-font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--pp-ink); }

/* ── Утилиты ───────────────────────────────────────────────── */
.pp-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pp-container-sm { max-width: 520px; margin: 0 auto; padding: 0 20px; }
.pp-section { padding: 88px 0; }
.pp-center { text-align: center; }
.pp-stack { display: flex; flex-direction: column; }

@media (max-width: 640px) {
  .pp-section { padding: 56px 0; }
}