/*
 * design-system/tokens/spacing.css
 * Editorial Calm — 8-px ритм. ТЗ раздел 3.3.
 */

[data-theme="editorial"] {
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Семантические отступы — desktop-lg по умолчанию */
  --page-px:     96px;
  --page-py:     64px;
  --gutter:      32px;
  --stack:       24px;
  --stack-tight: 16px;
  --stack-loose: 48px;

  /* Радиусы — Editorial Calm не любит сильно скруглённое */
  --r-0:    0;
  --r-1:    2px;     /* пилюли */
  --r-2:    4px;     /* кнопки, инпуты */
  --r-3:    8px;     /* крупные карточки — редко */
  --r-pill: 999px;

  /* Тени — минимально */
  --shadow-0:     none;
  --shadow-1:     0 1px 0 rgba(26, 26, 26, 0.04);
  --shadow-2:     0 1px 3px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-focus: 0 0 0 3px rgba(31, 61, 43, 0.25);

  /* Z-index слои */
  --z-base:    0;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* Адаптивные отступы — десктоп / планшет / мобайл */
@media (max-width: 1439px) {
  [data-theme="editorial"] {
    --page-px: 64px;
    --page-py: 56px;
    --gutter:  24px;
  }
}
@media (max-width: 1023px) {
  [data-theme="editorial"] {
    --page-px: 32px;
    --page-py: 40px;
    --gutter:  24px;
  }
}
@media (max-width: 767px) {
  [data-theme="editorial"] {
    --page-px: 20px;
    --page-py: 32px;
    --gutter:  16px;
  }
}

/* ─── Сетка ─────────────────────────────────────────────────────────── */

[data-theme="editorial"] .ed-page {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--page-px);
  padding-block:  var(--page-py);
}

[data-theme="editorial"] .ed-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* Семантические утилиты вертикального ритма */
[data-theme="editorial"] .ed-stack       { display: flex; flex-direction: column; gap: var(--stack); }
[data-theme="editorial"] .ed-stack-tight { display: flex; flex-direction: column; gap: var(--stack-tight); }
[data-theme="editorial"] .ed-stack-loose { display: flex; flex-direction: column; gap: var(--stack-loose); }