/* Flexform - токены дизайн-системы. Источник: DESIGN.md (система 8 из 10).
   Двухцветная схема: шафрановое поле вокруг светлого листа, чернила navy.
   Третьего цвета нет. Золота в сети нет. */

:root {
  /* Цвет */
  --field: #E0A11B;            /* шафран: поле вокруг листа */
  --field-dark: #1D2B4F;       /* вторая обложка: в неё заливается поле по скроллу */
  --sheet: #FDFBF7;            /* лист */
  --tint: #F5EFE3;             /* подложка таблиц и полей внутри листа */
  --ink: #1D2B4F;              /* чернила */
  --ink-muted: #55607D;        /* вторичный текст, контраст 6.06 на листе */
  --on-ink: #FDFBF7;
  --on-field: #1D2B4F;
  --accent-on-ink: #E9B74C;    /* шафран осветлён под navy, контраст 6.15 */
  --line: rgba(29, 43, 79, 0.20);
  --line-strong: rgba(29, 43, 79, 0.55);
  --error: #A32D1C;
  --scrim: rgba(29, 43, 79, 0.40);

  /* Шрифты */
  --serif: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --sans: 'Manrope', 'Manrope Fallback', Arial, sans-serif;

  /* Размер. Дисплей не выше 80 на десктопе, базовый текст не ниже 17,
     вторичный не ниже 15, поля формы от 16 - иначе iOS зумит. Цифры подняты
     против нижней границы брифа: на Poliform разрыв между гигантским героем и
     подписями в 13px оказался нечитаемым. */
  --t-display: clamp(42px, 7.2vw, 80px);
  --t-h2: clamp(30px, 4.4vw, 48px);
  --t-h3: clamp(23px, 2.8vw, 33px);
  --t-lead: clamp(19px, 1.6vw, 21px);
  --t-body: 18px;
  --t-small: 15px;
  --t-label: 13px;
  --t-counter: clamp(22px, 2.2vw, 28px);
  --t-field: 16px;

  /* Сетка: 9 колонок, 1380 внутри листа */
  --cols: 9;
  --measure: 1380px;
  --text-measure: 62ch;
  --gutter: 24px;
  --unit: 6px;

  /* Лист в поле */
  --fm: 40px;                  /* поле вокруг листа */
  --sheet-radius: 32px;
  --pad: 56px;                 /* внутренние поля листа */
  --head: 68px;

  /* Вертикальный ритм */
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 24px;
  --sp-5: 36px;
  --sp-6: 48px;
  --sp-7: 72px;
  --section: 128px;

  /* Тени: лист лежит на поле, кнопка даёт печатный оттиск */
  --shadow-sheet: 0 24px 60px rgba(29, 43, 79, 0.18);
  --stamp: 4px;

  /* Движение */
  --fast: 140ms;
  --mid: 240ms;
  --slow: 320ms;
  --ease-in: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.55, 0, .75, .2);
}

@media (max-width: 1080px) {
  :root { --pad: 32px; --section: 96px; --gutter: 18px; }
}

@media (max-width: 768px) {
  :root {
    --fm: 12px;
    --pad: 20px;
    --gutter: 14px;
    --section: 68px;
    --head: 56px;
    --sheet-radius: 20px;
  }
}