/* ==========================================================================
   WNDER — Bento design tokens
   Единственный источник правды по цвету, типографике, отступам и радиусам.
   Значения взяты из Figma-библиотеки студии (WNDR, node 1922:3821).
   Не хардкодить цвета и размеры в компонентах — только через эти переменные.
   ========================================================================== */

:root {

  /* ---------- Цвет ----------------------------------------------------- */

  /* Базовые */
  --c-ink:        #111111;  /* основной текст, тёмные кнопки (Figma: Main/Text) */
  --c-white:      #FFFFFF;  /* карточки по умолчанию      (Figma: Main/BG)      */
  --c-cream:      #FFFBF4;  /* мягкая подложка карточек   (Figma: Main/White)   */
  --c-beige:      #E6DED0;  /* тёплая подложка карточек   (Figma: Background 3) */
  --c-dark:       #1D1D1D;  /* тёмные карточки            (Figma: Cards BG)     */
  --c-line:       #CFCFCF;  /* границы, разделители       (Figma: Devider)      */

  /* Фон страницы. Выведен между --c-beige и --c-cream: на чистом белом
     карточки перестают читаться как отдельные «коробочки». */
  --c-canvas:     #EFEDE8;

  /* Акценты. Оба — фирменные цвета кейсов, поэтому работают как «свои». */
  --c-orange:     #FF630C;  /* основной акцент: CTA,活 nav, тариф-бейдж (кейс «Орфей») */
  --c-red:        #E83B36;  /* вторичный, только в кейсе Quilt Market   (Figma: Квилт) */

  /* Текст на тёмном/цветном фоне */
  --c-on-dark:            #FFFFFF;
  --c-on-dark-muted:      rgba(255,255,255,.62);

  /* Прозрачности для вторичного текста на светлом */
  --o-muted:      .60;   /* подписи, meta            */
  --o-eyebrow:    .55;   /* капслок-лейблы           */
  --o-arrow:      .45;   /* иконка-стрелка в кружке  */


  /* ---------- Типографика ---------------------------------------------- */

  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Начертания: используем только эти три. */
  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Шкала. clamp() даёт плавную адаптацию без лишних медиазапросов.
     Максимумы = значения из десктопного прототипа 1440px. */
  --fs-h1:        clamp(30px, 3.9vw, 56px);   /* H1 в hero                    */
  --fs-h2:        clamp(22px, 2.1vw, 30px);   /* заголовок секции             */
  --fs-title-lg:  clamp(24px, 2.4vw, 34px);   /* крупная плитка               */
  --fs-title-md:  clamp(20px, 1.8vw, 26px);   /* средняя плитка               */
  --fs-title-sm:  clamp(17px, 1.4vw, 20px);   /* малая плитка, карточка кейса */
  --fs-price:     clamp(22px, 1.8vw, 26px);   /* цена тарифа                  */
  --fs-body:      14px;                        /* поля формы, обычный текст    */
  --fs-meta:      11.5px;                      /* подписи под заголовками      */
  --fs-eyebrow:   10.5px;                      /* капслок-лейбл                */
  --fs-tab:       13.5px;                      /* пункты меню                  */

  --lh-tight:     1.08;   /* крупные заголовки            */
  --lh-title:     1.28;   /* многострочные заголовки плит */
  --lh-body:      1.45;   /* текст, подписи               */

  --ls-tight:     -.01em; /* заголовки                    */
  --ls-eyebrow:   .09em;  /* капслок                      */
  --ls-tariff:    .06em;  /* название тарифа              */


  /* ---------- Сетка и отступы ------------------------------------------ */

  --container:      1440px;  /* максимальная ширина контента */
  --pad-page:       20px;    /* внутренние поля контейнера   */
  --gap:            16px;    /* зазор между плитками — един для всех сеток */

  --pad-card:       26px 28px;  /* стандартная карточка   */
  --pad-card-lg:    38px 40px;  /* карточка формы         */
  --pad-card-sm:    22px;       /* карточка на мобильном  */

  --space-section:  52px;    /* отступ перед заголовком секции */
  --space-head:     16px;    /* от заголовка секции до сетки   */


  /* ---------- Радиусы --------------------------------------------------- */

  --r-card:     28px;   /* плитка                              */
  --r-field:    14px;   /* поле формы                          */
  --r-pill:     100px;  /* кнопки, табы, бейджи                */
  --r-arrow:    50%;    /* кружок стрелки                      */


  /* ---------- Прочее ---------------------------------------------------- */

  --size-arrow:   30px;         /* диаметр кружка со стрелкой */
  --size-knob:    32px;         /* кружок внутри pill-кнопки  */
  --bw:           1.2px;        /* толщина границ             */

  --ease:         cubic-bezier(.4, 0, .2, 1);
  --dur:          .22s;

  /* Затемняющая подложка под текстом на фото кейса.
     ВАЖНО: экспорты кейсов от клиента тёмные (средняя яркость 36–128 из 255),
     поэтому подложка намеренно слабая. Если придут более светлые исходники —
     усилить нижний стоп до .70. */
  --scrim: linear-gradient(
      to top,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.16) 30%,
      rgba(0,0,0,0)   55%,
      rgba(0,0,0,.22) 100%
  );
}


/* --------------------------------------------------------------------------
   Мобильные переопределения токенов.
   Меняем только значения — правила компонентов остаются нетронутыми.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --pad-page:  14px;
    --gap:       12px;
    --r-card:    22px;
    --pad-card:  var(--pad-card-sm);
    --pad-card-lg: 24px 20px;
    --space-section: 36px;
  }
}


/* --------------------------------------------------------------------------
   Montserrat. Подключить локально (предпочтительно) или через CDN.
   Нужны только три начертания — не тянуть весь набор.
   -------------------------------------------------------------------------- */

/*
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
*/