/* Токены. Единственное место, где допустимы сырые значения цвета, кегля, отступа, радиуса и easing.
   Значения перенесены из зафиксированного концепта B «Компостер» (concepts/b.html), имена – как в docs/design-system.md → Токены.
   Страница «Про Катю» переопределяет часть шкалы через .page-about (ниже). */
:root {
  --paper: #F4F0E9;
  --paper-2: #EAE4DA;
  --ink: #17140F;
  --ink-2: #5A5248;
  --mute: #A0978C;
  --red: #C8281A;
  --red-deep: #A51F13;
  --night: #1C1915;
  --night-ink: #F4F0E9;
  --night-2: #BDB4A8;
  --t-cream: #F1E6CC;
  --t-yellow: #F2C94C;
  --t-blue: #CBDDF2;
  --t-pink: #F2C6BE;

  --font: "Geologica", system-ui, sans-serif;

  --fs-display: clamp(76px, 13.4vw, 204px);
  --fs-h2: 120px;
  --fs-row: 68px;
  --fs-h3: 24px;
  --fs-lead: 21px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-tiny: 13px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 160px;
  --gutter: 80px;
  --gap: 24px;
  --r-pill: 999px;
  --r-ticket: 20px;
  --r-photo: 28px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (max-width: 768px) { :root { --fs-h2: 64px; --fs-row: 40px; --fs-h3: 21px; --fs-lead: 18px; --fs-body: 16px; --fs-small: 14px; --gutter: 32px; --gap: 16px; --s10: 112px; } }
@media (max-width: 500px) { :root { --gutter: 16px; --fs-row: 34px; --fs-h2: 56px; --fs-display: 22vw; } }

/* Страница «Про Катю»: своя шкала заголовков (имя крупнее, цитата), остальное наследует корень */
.page-about {
  --paper: #F4F0E9; --paper-2: #EAE4DA; --ink: #17140F; --ink-2: #5A5248;
  --red: #C8281A; --red-deep: #A51F13; --night: #1C1915; --night-ink: #F4F0E9; --night-2: #BDB4A8;
  --t-cream: #F1E6CC; --t-yellow: #F2C94C; --t-blue: #CBDDF2; --t-pink: #F2C6BE;
  --font: "Geologica", system-ui, sans-serif;
  --fs-display: clamp(64px, 8.6vw, 136px);
  --fs-h2: 84px; --fs-h2s: 56px; --fs-quote: 64px; --fs-item: 30px;
  --fs-lead: 21px; --fs-body: 17px; --fs-small: 15px; --fs-tiny: 13px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 160px;
  --gutter: 80px; --gap: 24px; --r-pill: 999px; --r-photo: 28px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (max-width: 768px) { .page-about { --fs-h2: 44px; --fs-h2s: 36px; --fs-quote: 34px; --fs-item: 22px; --fs-lead: 18px; --fs-body: 16px; --fs-small: 14px; --gutter: 32px; --gap: 16px; --s10: 104px; } }
@media (max-width: 500px) { .page-about { --gutter: 16px; --fs-display: 17vw; } }