/* ============================================================
   ROSIE'S — Design tokens
   Единственный источник правды по цвету, типографике, ритму.
   Палитра выведена из логотипа: #FEC2C9 (фон) и #AC4C60 (знак).
   ============================================================ */

:root {
  /* ---------- Бренд ---------- */
  --rose:            #AC4C60;  /* знак логотипа — основное действие */
  --rose-dark:       #8E3B4D;  /* hover */
  --rose-deep:       #6E2C3B;  /* pressed, тёмные акценты */
  --rose-soft:       #C97285;  /* дизейбл, вторичный */

  --pink:            #FEC2C9;  /* фон логотипа */
  --pink-200:        #FFD6DC;
  --pink-100:        #FFE7EB;
  --pink-050:        #FFF3F5;

  /* ---------- Поверхности ---------- */
  --bg:              #FFFBF9;  /* фон страницы, тёплый молочный */
  --surface:         #FFFFFF;
  --surface-warm:    #FEF6F3;
  --surface-sunk:    #FBF0EE;

  /* ---------- Текст ---------- */
  --ink:             #2E1B20;  /* заголовки и основной текст */
  --ink-2:           #5C4249;  /* вторичный */
  --ink-3:           #8B7076;  /* подписи, мета */
  --ink-inv:         #FFF8F6;  /* на тёмном/цветном */

  /* ---------- Линии ---------- */
  --line:            #F3E4E6;
  --line-strong:     #E6CFD3;

  /* ---------- Статусы ---------- */
  --ok:              #4A7C59;
  --ok-bg:           #EDF5EF;
  --warn:            #C2703B;
  --warn-bg:         #FDF2EA;
  --danger:          #B3453F;
  --danger-bg:       #FCEEED;

  /* ---------- Тона диетических меток ----------
     Для .tag и .filter-chip: «Веган», «Без глютена», «Много белка».
     Приглушённые намеренно — метки не должны спорить с розовым брендом
     и перетягивать внимание с фото и цены.
     Отдельно от статусов: «зелёный» здесь — свойство продукта, а не «успех».
     --*-strong — насыщенная рамка нажатого фильтр-чипа. */
  --tone-green-bg:     var(--ok-bg);   /* совпадает со статусным фоном */
  --tone-green-ink:    #3D6B4A;
  --tone-green-line:   #D8E9DD;
  --tone-green-strong: #7FA98C;

  --tone-amber-bg:     #FDF3E7;
  --tone-amber-ink:    #8A5A22;
  --tone-amber-line:   #F2E0C6;
  --tone-amber-strong: #C79A57;

  --tone-blue-bg:      #EAF0F7;
  --tone-blue-ink:     #38546F;
  --tone-blue-line:    #D5E1EE;
  --tone-blue-strong:  #7E9CBB;

  /* ---------- Плашка «Премиум» ---------- */
  --premium-from:    #6E5326;
  --premium-to:      #A8823D;
  --premium-ink:     #FFF8EC;

  /* ---------- Плитки категорий (#menu) ----------
     Подложки витрины «Что приготовим сегодня?». Намеренно приглушённые:
     четырнадцать плиток рядом — это уже много цвета, и насыщенные тона
     спорили бы и с розовым брендом, и с самими фотографиями блюд.
     Каждый тон — диагональ от светлого к чуть более плотному, как ткань
     на свету. Назначаются в CATEGORIES полем tint. */
  --tile-rose:  linear-gradient(135deg, var(--pink-050) 0%, var(--pink-100) 100%);
  --tile-peach: linear-gradient(135deg, #FFF4EC 0%, #FCE3D2 100%);
  --tile-cream: linear-gradient(135deg, #FFF9EF 0%, #F9EBCF 100%);
  --tile-sage:  linear-gradient(135deg, #F3F8F1 0%, #E0EDDC 100%);
  --tile-sky:   linear-gradient(135deg, #F1F6FB 0%, #DCE8F3 100%);
  --tile-lilac: linear-gradient(135deg, #F8F3FB 0%, #E9DFF2 100%);

  /* ---------- Типографика ---------- */
  --font-ui:     'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Caveat', 'Manrope', cursive;

  /* 4.25rem давало 68px на десктопе: заголовок героя разворачивался в 6 строк
     и растягивал секцию до 1055px при вьюпорте 900. 3.5rem = 56px. */
  --fs-display: clamp(2.125rem, 1.35rem + 3.1vw, 3.5rem);
  --fs-h1:      clamp(1.85rem, 1.25rem + 2.6vw, 3.00rem);
  --fs-h2:      clamp(1.50rem, 1.15rem + 1.6vw, 2.25rem);
  --fs-h3:      clamp(1.20rem, 1.05rem + 0.7vw, 1.50rem);
  --fs-lg:      1.125rem;
  --fs-base:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-2xs:     0.6875rem;

  --lh-tight:   1.12;
  --lh-snug:    1.28;
  --lh-normal:  1.55;
  --lh-loose:   1.7;

  --tracking-tight: -0.022em;
  --tracking-wide:   0.08em;

  /* ---------- Ритм: сетка 8px ---------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  /* Использовался в аккордеонах и карточках, но объявлен не был:
     var(--s-7) делал всю запись padding невалидной, и отступ падал в 0 —
     текст вопроса и стрелка прилипали к краям блока. */
  --s-7:  1.75rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---------- Скругления ---------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------- Тени: тёплые, розовые, мягкие ---------- */
  --sh-xs: 0 1px 2px rgba(110, 44, 59, 0.05);
  --sh-sm: 0 2px 8px rgba(110, 44, 59, 0.06);
  --sh-md: 0 6px 20px rgba(110, 44, 59, 0.08);
  --sh-lg: 0 14px 40px rgba(110, 44, 59, 0.11);
  --sh-xl: 0 24px 64px rgba(110, 44, 59, 0.15);
  --sh-rose: 0 8px 24px rgba(172, 76, 96, 0.22);

  /* ---------- Движение ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   420ms;
  --t-slower: 680ms;

  /* ---------- Раскладка ---------- */
  --wrap:      1180px;
  --wrap-narrow: 760px;
  --gutter:    clamp(1rem, 0.5rem + 2vw, 2rem);

  /* Высота шапки. От неё считаются липкая лента категорий, панель меню
     и scroll-margin якорей — всё берёт значение отсюда и подстраивается само,
     поэтому менять размер знака нужно вместе с этим числом.
     Шапка липкая, висит на экране постоянно, так что каждый лишний
     десяток пикселей — это отъеденный кусок вьюпорта.
     Знак: 66 px в sections.css, 42 px на телефоне в blocks.css. */
  --header-h:  76px;
  --dock-h:    76px;   /* нижняя панель корзины на мобиле */

  /* ---------- Слои ---------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-dock:    300;
  --z-overlay: 400;
  --z-drawer:  500;
  --z-toast:   600;
  /* Просмотр фото во весь экран — поверх всего, включая шторки и тосты:
     это модальный режим, из которого выходят осознанно. */
  --z-lightbox: 700;
}

@media (max-width: 720px) {
  :root {
    --header-h: 60px;
  }
}

/* Уважаем настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
    --t-slower: 0ms;
  }
}