/* ============================================================
   OLALOOK — DESIGN TOKENS
   Единственный источник правды для цветов, размеров и отступов.
   Правило: в правилах CSS не должно встречаться ни одного
   числа кегля, цвета или отступа — только var(--...).

   Все адаптивные значения интерполируются между
   360px (мобильный) и 1280px (десктоп) внутри самого токена.
   В медиазапросах размеры НЕ переопределяются.
   ============================================================ */

:root{

  /* ---------- 1. ЦВЕТ ------------------------------------- */

  /* Фоны */
  --bg:              #F5EFE4;  /* основной фон страницы */
  --bg-alt:          #F1E9DA;  /* фон секции: отзывы, подвал, полоса Etsy */
  --bg-dark:         #17130F;  /* тёмная полоса */
  --bg-plate:        rgba(245,239,228,.95); /* табличка на плитке категории */

  /* Текст. Контраст указан к --bg, минимум по норме — 4.5:1 */
  --text:            #26201B;  /* весь основной текст            13.6:1 */
  --text-2:          #4A4038;  /* вторичный: подписи, мелкий шрифт 8.9:1 */
  --text-on-dark:    #F0E9DC;  /* текст на --bg-dark              14.0:1 */
  --text-on-dark-2:  #DCD2C2;  /* вторичный на --bg-dark          11.0:1 */

  /* Акцент */
  --accent:          #5C1113;  /* заголовки-акценты, ссылки, кнопка,
                                  звёзды рейтинга                12.1:1 */
  --accent-dk:       #430B0D;  /* hover кнопки */

  /* Декор. ТЕКСТОМ НЕ ИСПОЛЬЗУЕТСЯ НИКОГДА.
     --gold на кремовом даёт 2.1:1 — это нечитаемо. */
  --gold:            #C9A15A;  /* линии, рамки, ромбы, штриховые иконки */
  --gold-line:       rgba(201,161,90,.6);  /* хайрлайны и разделители */
  --gold-line-soft:  rgba(201,161,90,.45); /* самые тихие границы */
  --sage:            #8A9480;  /* только внутри нарисованных орнаментов */

  /* Граница на тёмном фоне */
  --line-on-dark:    rgba(240,233,220,.55);


  /* ---------- 2. ШРИФТ ------------------------------------ */

  --font-display: 'DM Serif Display', Georgia, serif;      /* заголовки */
  --font-text:    'Jost', system-ui, -apple-system, sans-serif; /* всё остальное */
  --font-logo:    'Cormorant Garamond', Georgia, serif;    /* ТОЛЬКО логотип */

  /* Семь ступеней. Новых размеров вне этого списка не существует. */

  /* H1 героя                                   34px → 60px */
  --fs-display: clamp(34px, 23.83px + 2.83vw, 60px);
  /* H2 тёмной полосы, заголовок страницы       28px → 44px */
  --fs-xl:      clamp(28px, 21.74px + 1.74vw, 44px);
  /* Заголовок секции                           21px → 30px */
  --fs-lg:      clamp(21px, 17.48px + 0.98vw, 30px);
  /* Название товара, категории, цитата отзыва  17px → 20px */
  --fs-md:      clamp(17px, 15.83px + 0.33vw, 20px);
  /* Абзац, цена, подзаголовок героя, подвал    16px → 17px */
  --fs-base:    clamp(16px, 15.61px + 0.11vw, 17px);
  /* Мелкая подпись, «Etsy review», мелкий шрифт    14px */
  --fs-sm:      14px;
  /* Всё вразрядку капслоком: навигация, кнопки,
     полоса доверия, теглайн                    13px → 14px */
  --fs-caps:    clamp(13px, 12.61px + 0.11vw, 14px);

  /* Начертания. 300 разрешён только для --fs-display и --fs-xl. */
  --fw-logo:    300;  /* Cormorant Garamond в логотипе — только этот вес */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* Межбуквенное */
  --ls-display: .01em;
  --ls-lg:      .03em;
  --ls-normal:  0;
  --ls-caps:    .16em;

  /* Межстрочное */
  --lh-display: 1.06;
  --lh-xl:      1.12;
  --lh-lg:      1.2;
  --lh-md:      1.3;
  --lh-base:    1.6;
  --lh-sm:      1.5;
  --lh-caps:    1.7;


  /* ---------- 3. ОТСТУПЫ ---------------------------------- */

  /* Базовая шкала. Значений между ступенями не бывает. */
  --sp-4:  4px;
  --sp-8:  8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;

  /* Производные, адаптивные */
  --sp-section: clamp(40px, 24.35px + 4.35vw, 80px); /* padding секции сверху/снизу */
  --gutter:     clamp(20px, 12.17px + 2.17vw, 40px); /* боковые поля страницы */
  --gap:        clamp(16px, 12.87px + 0.87vw, 24px); /* зазор в любой сетке */

  /* Назначение фиксированных ступеней:
     --sp-24  заголовок секции → содержимое
     --sp-12  заголовок → абзац; фото карточки → название
     --sp-4   название товара → цена
     --sp-16  внутренние отступы таблички и мелких блоков      */


  /* ---------- 4. ШИРИНЫ И ВЫСОТЫ -------------------------- */

  --maxw:       1280px;  /* максимальная ширина контента */
  --maxw-text:  52ch;    /* абзац прозой — не длиннее */
  --maxw-lead:  34ch;    /* подзаголовок героя */

  /* Высоты картинок задаются ТОЛЬКО отсюда.
     <img> не растягивается по высоте флекс-строки — если задать
     высоту руками в одном месте, вёрстка разъедется в соседнем. */
  --hero-h: 34vh;             /* переопределяется ниже для десктопа */
  --band-h: 260px;            /* фото в тёмной полосе */
  --ar-card: 4 / 5;           /* фото товара */
  --ar-cat:  3 / 4;           /* фото категории */
  --ar-rev:  1 / 1;           /* фото покупателя в отзыве */


  /* ---------- 5. СКРУГЛЕНИЯ И ЛИНИИ ----------------------- */

  --r-sm:   3px;
  --r-arch: 50% 50% 3px 3px / 28% 28% 2% 2%;  /* арка плитки категории */
  --r-arch-inner: 50% 50% 2px 2px / 28% 28% 2% 2%; /* фото внутри арки */
  --border-w: 1px;
}

/* Единственное место, где значения меняются по медиазапросу —
   высоты изображений: они зависят от вьюпорта, а не от кегля. */
@media (min-width: 900px){
  :root{
    --hero-h: min(64vh, 560px);
    --band-h: 430px;
  }
}