/* ==========================================================================
   Турботекст — дизайн-токены
   Источник: Figma «Турботекст (Copy 2)» → страница «Галерея ИИ контента ТТ»
   file: ny0qFS00KDdFVtEorIOfSe, node: 466:2185 (Frame 329)
   Все значения ниже взяты из CSS-дампа Figma без изменений.
   ========================================================================== */

/* --- Шрифты -------------------------------------------------------------
   Файлы уже есть в проекте: /templates/turbotext/home/fonts/
   В home/css/main.min.css они объявлены как три отдельных семейства
   (PTRootUIRegular / PTRootUIMedium / PTRootUIBold). Здесь собираем их в
   одно семейство «PT Root UI» с весами 400/500/700 — так же, как в Figma.
   ----------------------------------------------------------------------- */

@font-face {
  font-family: 'PT Root UI';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(/templates/turbotext/home/fonts/PTRootUIRegular/PTRootUIRegular.woff2) format('woff2'),
       url(/templates/turbotext/home/fonts/PTRootUIRegular/PTRootUIRegular.woff) format('woff');
}

@font-face {
  font-family: 'PT Root UI';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url(/templates/turbotext/home/fonts/PTRootUIMedium/PTRootUIMedium.woff2) format('woff2'),
       url(/templates/turbotext/home/fonts/PTRootUIMedium/PTRootUIMedium.woff) format('woff');
}

@font-face {
  font-family: 'PT Root UI';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url(/templates/turbotext/home/fonts/PTRootUIBold/PTRootUIBold.woff2) format('woff2'),
       url(/templates/turbotext/home/fonts/PTRootUIBold/PTRootUIBold.woff) format('woff');
}

@font-face {
  font-family: 'Furore';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(/templates/turbotext/home/fonts/Furore/Furore.woff2) format('woff2'),
       url(/templates/turbotext/home/fonts/Furore/Furore.woff) format('woff');
}

:root {
  /* --- Цвета (имена — как слои-стили в Figma) --------------------------- */
  --tt-h1:            #11101C;  /* 11101C H1 — основной текст, заголовки   */
  --tt-h2:            #30333B;  /* H2 — текст на тегах, бордер тёмных кнопок */
  --tt-h3:            #5B5C66;  /* 5B5C66 — вторичный текст, хлебные крошки */
  --tt-h4:            #9CA2AD;  /* A7ACB7 H4 — приглушённый текст, иконки  */
  --tt-stroke:        #CCD3DF;  /* stroke — неактивная часть волны, бордеры */
  --tt-bg-soft:       #E4E9F1;  /* DADEEB — фон тегов                      */
  --tt-bg:            #FDFEFE;  /* Бг, H1 (тёмная тема) — белый фон/текст  */
  --tt-accent:        #F60C2B;  /* Акцентный — красный ТТ                  */
  --tt-blue:          #1665C4;  /* Синий — кнопка «Сгенерировать»          */
  --tt-placeholder:   #D9D9D9;  /* заглушка под изображение               */

  /* Из мобильного макета (node 2116:44320) */
  --tt-bg-page:       #F2F6FA;  /* F2F6FA — фон страницы                   */
  --tt-bg-dark:       #11151E;  /* бг тёмная тема — шапка                  */
  --tt-accent-dark:   #EF102E;  /* DA1E3D — акцент на тёмном (лого, аватар) */
  --tt-accent-deep:   #B40041;  /* тёмная часть логотипа                   */
  --tt-yellow:        #FFCE0C;  /* Жёлтый — тег «Гений», уведомления       */
  --tt-stroke-dark:   rgba(255, 255, 255, 0.13); /* stroke на тёмной теме  */

  /* --- Тени -------------------------------------------------------------- */
  --tt-shadow-tabs:   0px 4px 32px rgba(10, 14, 25, 0.22);   /* «Тень табов»        */
  --tt-shadow-blue:   0px 4px 26px rgba(22, 101, 196, 0.26); /* «Тень кнопки синяя» */
  --tt-shadow-accent: 0px 4px 26px rgba(246, 12, 43, 0.26);  /* «Тень кнопки»       */
  --tt-shadow-soft:   0px 4px 26px rgba(10, 14, 25, 0.23);   /* пилюля «Дополнительно», мобайл */

  /* Затемнение под нижней панелью, мобильный макет */
  --tt-overlay-bottom: linear-gradient(180deg, rgba(10, 14, 25, 0) 0%, rgba(10, 14, 25, 0.72) 100%);

  /* --- Радиусы ----------------------------------------------------------- */
  --tt-radius-pill:   90px;  /* табы-контейнеры, кнопки, теги      */
  --tt-radius-tab:    25px;  /* неактивный таб, тёмные кнопки      */
  --tt-radius-card:   15px;  /* карточка ИИ-контента, табы мобайл  */
  --tt-radius-sm:     8px;   /* активный таб в мобильной версии    */
  --tt-radius-img:    5px;   /* картинка внутри сравнения          */

  /* --- Типографика ------------------------------------------------------- */
  --tt-font-ui:       'PT Root UI', 'Montserrat', -apple-system, sans-serif;
  --tt-font-display:  'Furore', 'PT Root UI', sans-serif;

  /* Furore — заголовки и табы (line-height 109% из макета) */
  --tt-t-furore-38:   400 38px/109% var(--tt-font-display);  /* «38 Furore» — H1 страницы  */
  --tt-t-furore-28:   400 28px/109% var(--tt-font-display);  /* «28 Furore» — H1 мобайл    */
  --tt-t-furore-16:   400 16px/109% var(--tt-font-display);  /* «16 Furore» — активный таб */
  --tt-t-furore-15:   400 15px/109% var(--tt-font-display);  /* таб                        */
  --tt-t-furore-14:   400 14px/109% var(--tt-font-display);  /* таб мобайл                 */

  /* PT Root UI */
  --tt-t-24b:         700 24px/100% var(--tt-font-ui);  /* «24B» — заголовок текст-карточки */
  --tt-t-18b:         700 18px/22px var(--tt-font-ui);  /* «18B» — главная кнопка, мобайл   */
  --tt-t-17b:         700 17px/20px var(--tt-font-ui);  /* «17B» — текст кнопки             */
  --tt-t-16b:         700 16px/19px var(--tt-font-ui);  /* «16 B» — пилюли настроек, мобайл */
  --tt-t-16m:         500 16px/19px var(--tt-font-ui);  /* «16 M» — подсказка, мобайл       */
  --tt-t-14b:         700 14px/17px var(--tt-font-ui);  /* «14 B» — счётчик лайков          */
  --tt-t-14m:         500 14px/17px var(--tt-font-ui);  /* «14M» — тег                      */
  --tt-t-12m:         500 12px/130% var(--tt-font-ui);  /* «12 М» — промт, подсказка        */
  --tt-t-12r:         400 12px/14px var(--tt-font-ui);  /* «12R» — хлебные крошки           */
  --tt-t-10m:         500 10px/12px var(--tt-font-ui);  /* «10 М» — таймкод плеера          */

  /* --- Отступы (по auto-layout из макета) -------------------------------- */
  --tt-pad-card:      12px;      /* Frame 98 — паддинг карточки        */
  --tt-pad-btn:       7px 12px;  /* Кнопка/акцентная                   */
  --tt-pad-tab:       6px 10px;  /* Таб                                */
  --tt-pad-tag:       6px 10px;  /* Тег                                */
  --tt-gap-btn:       10px;      /* текст ↔ иконка в кнопке            */
  --tt-gap-tab:       8px;       /* иконка ↔ текст в табе              */
  --tt-gap-tag:       6px;       /* между тегами                       */
}