/* ============================================================
   ТЕМА: image — Изображения
   ------------------------------------------------------------
   Галерейный характер. Изображение — главный герой, текст компактный
   и служебный. Крупная display-типографика, широкие полосы, минимум
   декора: он спорит с картинками.

   Моноширинного самохостного шрифта нет намеренно — вместо третьей
   гарнитуры используется системный стек. Экономит 30 КБ.

   Контраст: --accent на --bg = 6,0:1, белый на обеих точках
   --grad-accent ≥ 5,1:1.
   ============================================================ */

@font-face {
  font-family: 'Unbounded';
  src: url('/fonts/unbounded-var.woff2') format('woff2-variations');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-045F, U+2000-206F;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-045F, U+2000-206F, U+20B0-20BF;
}

@font-face {
  font-family: 'Manrope Fallback';
  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root[data-direction='image'] {
  --bg:              #fbf9f7;
  --bg-soft:         #ffffff;
  --surface:         #ffffff;
  --surface-2:       #f3efea;
  --line:            #e7e0d8;
  --line-soft:       #f0ebe4;
  --line-strong:     #928d88;

  --text:            #1a1614;
  --text-2:          #57504a;
  --text-3:          #787067;
  --text-inv:        #ffffff;

  --accent:          #a21caf;
  --accent-2:        #b45309;
  --accent-ink:      #ffffff;
  --accent-soft:     rgb(162 28 175 / 7%);
  --accent-line:     rgb(162 28 175 / 28%);
  --grad-accent:     linear-gradient(135deg, #a21caf 0%, #c2410c 100%);
  --grad-soft:       linear-gradient(135deg, rgb(162 28 175 / 7%), rgb(180 83 9 / 5%));

  --ok:              #15803d;
  --ok-bg:           rgb(21 128 61 / 10%);
  --warn:            #92660a;
  --warn-bg:         rgb(146 102 10 / 10%);
  --danger:          #b91c1c;
  --danger-bg:       rgb(185 28 28 / 10%);
  --info:            #1d4ed8;
  --info-bg:         rgb(29 78 216 / 10%);

  --gold:            #92660a;
  --grad-gold:       linear-gradient(135deg, #f5c451 0%, #e08b3c 100%);

  --r-xs:            4px;
  --r-sm:            8px;
  --r-md:            12px;
  --r-lg:            16px;
  --r-xl:            22px;
  --r-full:          999px;
  --r-btn:           999px;
  --r-card:          16px;
  --r-field:         12px;
  --border-w:        1px;

  --sh-xs:           0 1px 2px rgb(26 22 20 / 5%);
  --sh-sm:           0 3px 12px rgb(26 22 20 / 8%);
  --sh-md:           0 18px 44px -20px rgb(26 22 20 / 22%);
  --sh-lg:           0 36px 84px -34px rgb(26 22 20 / 30%);
  --sh-focus:        0 0 0 3px var(--accent-line);

  --font-h:          'Unbounded', 'Manrope', 'Manrope Fallback', system-ui, sans-serif;
  --font-b:          'Manrope', 'Manrope Fallback', system-ui, sans-serif;
  --font-m:          ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --tracking-h:      -0.03em;
  --weight-h:        700;
  --lh-h:            1.06;
  --lh-b:            1.6;

  /* Заголовки крупные и контрастные к тексту — характер витрины */
  --step--1:         clamp(0.79rem, 0.77rem + 0.10vw, 0.84rem);
  --step-0:          clamp(0.94rem, 0.91rem + 0.15vw, 1.03rem);
  --step-1:          clamp(1.13rem, 1.07rem + 0.28vw, 1.29rem);
  --step-2:          clamp(1.38rem, 1.27rem + 0.53vw, 1.69rem);
  --step-3:          clamp(1.69rem, 1.50rem + 0.92vw, 2.22rem);
  --step-4:          clamp(2.06rem, 1.77rem + 1.44vw, 2.90rem);
  --step-5:          clamp(2.52rem, 2.07rem + 2.24vw, 3.80rem);
  /* Нижняя точка ниже, чем просит характер темы: Unbounded широкий,
     и на 375 px при 2.9rem русское слово «красивая» уже не помещалось
     в колонку — заголовок рвался посреди слова. Верх шкалы прежний,
     на десктопе крупная подача сохраняется. */
  --step-6:          clamp(2.25rem, 1.35rem + 3.90vw, 4.75rem);

  --sp-1:            4px;
  --sp-2:            8px;
  --sp-3:            12px;
  --sp-4:            16px;
  --sp-5:            24px;
  --sp-6:            32px;
  --sp-7:            48px;
  --sp-8:            68px;
  --sp-9:            100px;
  --sp-10:           136px;
  --container:       min(96vw, 1720px);
  --container-narrow: min(92vw, 860px);
  --measure:         64ch;
  --header-h:        72px;
  --section-y:       clamp(32px, 3.4vw, 56px);

  --ease:            cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:         cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:          0.16s var(--ease);
  --t-med:           0.3s var(--ease);
  --t-slow:          0.44s var(--ease);

  --texture:         none;
  /* ---------- Тёмная врезка ----------
     Приём светлой страницы, а не вторая тема: контрастная секция
     один-два раза за лендинг. Тёмную тему убрали, эти токены её не заменяют. */
  --invert-bg:       #171210;
  --invert-surface:  #211a17;
  --invert-text:     #f8f1ec;
  --invert-text-2:   #c9b9ae;
  --invert-accent:   #f0a6fa;
  --invert-line:     rgb(255 255 255 / 12%);

  /* Градиентная подложка первого экрана и финального CTA */
  --mesh:
    radial-gradient(54ch 34ch at 86% -12%, rgb(162 28 175 / 13%), transparent 68%), radial-gradient(46ch 30ch at 4% 4%, rgb(194 65 12 / 10%), transparent 70%);

  /* ---------- Фоновые изображения секций ----------
     Кладутся в public/img/bg/image/. Пока файла нет — слой просто
     не отрисуется, под ним останется градиент: пустого экрана не будет.
     Промпты — GRAPHICS-BACKGROUNDS.md */
  --veil:            0.82;
  --veil-invert:     0.78;

  --bg-img-hero:     url('/img/bg/image/hero.webp');
  --bg-img-tint:     url('/img/bg/image/tint.webp');
  --bg-img-panel:    url('/img/bg/image/panel.webp');
  --bg-img-invert:   url('/img/bg/image/invert.webp');

}