/* ==========================================================================
   MIROLINE — дизайн-токены
   Вариант «Молоко и терракота». Все значения зафиксированы в спеке
   docs/superpowers/specs/2026-08-03-miroline-homepage-design.md
   ========================================================================== */

:root {
  /* --- Цвет ------------------------------------------------------------- */
  --c-bg:            #FDFBF8;   /* основной фон */
  --c-surface:       #F1EBE3;   /* подложка медиа, вторичные блоки */
  --c-surface-2:     #E9E1D6;   /* границы плиток, разделители на surface */
  --c-ink:           #1C1815;   /* основной текст */
  --c-ink-2:         #6E6862;   /* вторичный текст, контраст 4.8:1 */
  --c-ink-3:         #6B655E;   /* старая цена, контраст 5.5:1 */
  --c-accent:        #B0542F;   /* акцент */
  --c-accent-hover:  #96431F;
  --c-accent-light:  #CF7A52;   /* акцент на тёмном фоне, контраст 4.7:1 */
  --c-accent-soft:   #F3E4DB;   /* фон акцентных плашек */
  --c-ink-on-soft:   #6A645E;   /* вторичный текст на accent-soft, контраст 4.7:1 */
  --c-neutral:       #8A6A4F;   /* тёплый коричневый */
  --c-dark:          #2B2521;   /* тёмные блоки */
  --c-dark-deep:     #1C1815;
  --c-on-dark:       #F3ECE3;   /* текст на тёмном */
  --c-on-dark-2:     #B5ABA0;   /* вторичный текст на тёмном, контраст 5.6:1 */
  --c-line:          rgba(28, 24, 21, .12);
  --c-line-strong:   rgba(28, 24, 21, .22);
  --c-line-on-dark:  rgba(243, 236, 227, .16);
  --c-error:         #8E2F22;
  --c-success:       #3F6B4F;
  --c-white:         #FFFDFA;

  /* --- Типографика ------------------------------------------------------ */
  /* Одна гарнитура на весь интерфейс — Golos Text: она сделана Paratype
     под интерфейсы на кириллице и ровно работает и в 12 px подписи,
     и в 62 px заголовке. Уровни различаются весом и трекингом. */
  --f-display: 'Golos Text', 'Golos fallback', system-ui, -apple-system, sans-serif;
  --f-text:    'Golos Text', 'Golos fallback', system-ui, -apple-system, sans-serif;

  /* Антиква осталась только в логотипе — это знак марки, а не текст.
     Из-за неё в шрифтах лежит один латинский файл: слово MIROLINE. */
  --f-logo:    'Cormorant Garamond', 'Cormorant fallback', 'Times New Roman', serif;

  /* Гротеск в крупном кегле требует минусового трекинга, а у Golos нет
     начертаний легче 400 — поэтому воздух добираем ещё и интерлиньяжем. */
  --ls-display: -.035em;
  --ls-h2:      -.025em;

  --fs-h1:      3.875rem;  /* 38 → 62 */
  --fs-h2:      2.5rem;    /* 28 → 40 */
  --fs-h3:      1.25rem;                                     /* 20 */
  --fs-body-lg: 1.0625rem;                                   /* 17 */
  --fs-body:    1rem;                                        /* 16 */
  --fs-sm:      0.875rem;                                    /* 14 */
  --fs-xs:      0.75rem;                                     /* 12 */
  --fs-eyebrow: 0.6875rem;                                   /* 11 */

  --lh-display: 1.1;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --lh-tight:   1.35;

  --ls-eyebrow: .22em;
  --ls-logo:    .36em;

  /* --- Отступы (база 4px) ----------------------------------------------- */
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-24: 6rem;      /* 96 */
  --sp-32: 8rem;      /* 128 */

  /* вертикальный ритм секций */
  --sp-section: 3rem;

  /* --- Раскладка --------------------------------------------------------- */
  --container:      82.5rem;
  --container-pad:  1.5rem;   /* 24, на мобильном переопределяется на 16 */
  --grid-gap:       1.5rem;

  /* --- Форма -------------------------------------------------------------- */
  --radius:      .4375rem;   /* блоки, карточки, кнопки, поля ввода */
  --radius-sm:   .25rem;   /* бейджи и мелкие плашки: 7px на высоте 20px читается как овал */
  --radius-pill: 62.4375rem;

  /* --- Движение ----------------------------------------------------------- */
  --t-fast: 160ms;
  --t-base: 200ms;
  --ease:   cubic-bezier(.4, 0, .2, 1);

  /* --- Слои --------------------------------------------------------------- */
  --z-dropdown: 40;
  --z-header:   50;
  --z-topbar:   51;   /* выше шапки: иначе список городов уходит под неё */
  --z-overlay:  55;
  --z-drawer:   60;
  --z-toast:    70;

  /* высота шапки — обновляется из js/menu.js, к ней привязано уведомление */
  --header-h: 7.5rem;
}

@media (max-width: 767px) {
  :root {
    --container-pad: 1rem;
    --grid-gap: 1rem;
  }
}