/* Токены приглашения. ЕДИНСТВЕННЫЙ источник значений для этого сайта.
   Цвета, шрифты, шаг и радиусы берутся только отсюда. В разметке и в
   styles.css допустимы var(--...), но не hex и не магические числа.

   Палитра снята пипеткой с референса `assets/ref/own-mishki-shary.jpg`,
   того самого, с мишками, шарами и тортом. Не подобрана на глаз: каждое
   значение это медиана по участку картинки, см. подписи справа.
   Обновлено 6 сентября 2026, до этого палитра была от сафари с Леоном. */

:root {

  /* ── Цвет. Только роли, примитивов в разметке не бывает ───────────── */

  --surface:        #f9f6f1;   /* бумага референса, снято с фона */
  /* НЕ ПРИМЕНЯЕТСЯ на странице с 07.09.2026. Чередование фонов у секций
     давало жёсткие швы, которые не совпадали с высотой экрана ни на одном
     телефоне. Токен оставлен, потому что его читает make_og.py, и потому
     что цвет верный. Возвращать его как background секции НЕЛЬЗЯ, это
     отменит всё направление. */
  --surface-deep:   #f1ece2;   /* вторая плоскость, блоки после первого экрана */
  --surface-veil:   #fffdf9;   /* самый светлый, подложка под текст */

  --ink:            #4a4034;   /* основной текст, тёплый тёмно-коричневый */
  --ink-soft:       #8a7c69;   /* вторичный текст, подписи */
  --ink-faint:      #b3a693;   /* третий уровень, подсказки */

  /* Акцент взят из гривы льва и мордочки лисы, но глубже, чтобы держать
     крупный кегль на светлой бумаге. */
  --accent:         #96683f;
  --accent-deep:    #744f2f;
  --accent-soft:    #f0e6d8;

  /* Характерные цвета иллюстрации. Нужны точками, звёздочками и рамками,
     чтобы вёрстка не спорила с рисунком. */
  --sage:           #8f9075;   /* сердце в левом верхнем углу */
  --sage-soft:      #d2dacf;   /* акварельное облако под текстом */
  --sun:            #e8c368;   /* жёлтый шар, бант, звёзды гирлянды */
  --brick:          #b74c33;   /* свитер зайца */
  --sky:            #bddde7;   /* голубой шар */
  --meadow:         #c5dda7;   /* зелёный шар */
  --blush:          #e6b3ae;   /* розовый шар */

  --rule:           #cbc2ae;   /* разделительная черта между детьми */

  /* Тихий текст, но ЧИТАЕМЫЙ. Заведён 07.09.2026 взамен --ink-soft там, где
     кегль мелкий: у --ink-soft на бумаге 3.8 к одному, этого мало, а строка
     про коттеджный посёлок это единственная подсказка тому, кто едет за
     рулём. Здесь 5.6 к одному. */
  --ink-quiet:      #6f6252;

  /* Состояния. Заведены до первого носителя, а не по факту нужды. */
  --focus:          #744f2f;
  --success:        #6f8a5b;
  --danger:         #b74c33;

  /* ── Шрифт ────────────────────────────────────────────────────────── */

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-text:    Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Размеры. Плавные, чтобы не городить брейкпойнты на каждый экран. */
  --t-hint:    clamp(10px, 2.4vw, 12px);   /* подсказки, «дальше» */
  --t-note:    clamp(12px, 2.8vw, 13px);   /* сноска под кнопкой, панель */
  --t-label:   clamp(12px, 2.7vw, 13px);   /* надзаголовок, имена */
  --t-body:    clamp(15px, 3.6vw, 18px);   /* дата, адрес */
  --t-lead:    clamp(17px, 4.2vw, 22px);   /* время */
  --t-h2:      clamp(30px, 7.4vw, 52px);   /* заголовок блока */
  --t-age:     clamp(70px, 19vw, 152px);   /* цифры возраста */

  /* На первом экране эта шкала ПЕРЕКРЫТА собственной, от высоты листа,
     см. .screen в styles.css. Здесь размеры для блоков ниже. */

  --track-wide: .22em;   /* разрядка капса */
  --track-mid:  .12em;

  /* ── Шаг сетки. Четыре пикселя ────────────────────────────────────── */

  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 40px;  --s8: 56px;
  --s9: 72px;  --s10: 96px; --s11: 128px;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-pill: 999px;

  /* ── Движение ─────────────────────────────────────────────────────── */

  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --dur-slow: 1100ms;
  --dur-mid:  620ms;
}