/* ============================================================================
   Resoma × Ekaterina Tur — Tilda Brand Bridge v1 — DEPRECATED, use v2
   (v1 задавал цвет текста глобально и ломал белый текст на тёмных секциях)
   ----------------------------------------------------------------------------
   Цель: нативные блоки Тильды (кнопки, карточки, формы, типографика) выглядят
   как дизайн-система приложения resoma.ru «из коробки».

   Источник правды токенов: apps/web/src/styles/app.css (ДС приложения).

   Как отключить (kill-switch): удалить <link> на этот файл из
   «Настройки сайта → Ещё → HTML-код для вставки внутрь HEAD» в Тильде.

   Как обновлять: правки вносить в репо (apps/web/public/), затем
   переименовать в v2, задеплоить и обновить ссылку в HEAD Тильды.
   После любых изменений в HEAD — пере-публикация страницы в Тильде.

   Чего этот файл сознательно НЕ трогает:
   - opacity / transform и [data-animate*] — ими управляет tilda-animation;
   - цвета, заданные Екатериной явными настройками блока (rec-scoped CSS
     Тильды имеет специфичность выше и выигрывает намеренно);
   - контролы слайдеров/каруселей (t-slds__arrow, t1196__control, ...).
   ============================================================================ */

/* Defensive: Montserrat (Tilda usually loads it as project font; this makes
   the bridge self-sufficient on pages where it is not assigned yet). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300..800&display=swap');

:root {
    /* Палитра бренда (= токенам приложения) */
    --resoma-bg: #f0e6dc;             /* фон страницы */
    --resoma-fg: #3e0b23;             /* основной текст */
    --resoma-primary: #9b3626;        /* кнопки, акценты */
    --resoma-primary-hover: #8c3122;  /* ховер primary */
    --resoma-secondary: #f1e6db;      /* вторичная кнопка / фон-подложка */
    --resoma-secondary-hover: #e7d9c8;
    --resoma-ghost: #f8f3ed;          /* «призрачная» кнопка */
    --resoma-white: #ffffff;

    /* Форма */
    --resoma-radius-btn: 999px;       /* pill, как Button в приложении */
    --resoma-radius-card: 24px;       /* = rounded-3xl карточек приложения */
    --resoma-radius-field: 10px;      /* = --radius 0.625rem */

    /* Тени (из --shadow-primary / карточек приложения) */
    --resoma-shadow-card: 0 4px 6px 0 rgba(155, 54, 38, 0.1);
    --resoma-shadow-btn: 0 4px 12px 0 rgba(155, 54, 38, 0.25);

    /* Типографика */
    --resoma-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
   1. Кнопки — pill + Montserrat medium (форма применяется всегда;
      цвет — только когда блок НЕ задаёт свой собственный)
   ---------------------------------------------------------------------------- */
a.t-btn:not(.t-slds__arrow):not(.t1196__control):not(.t-carousel__control),
button.t-btn:not(.t-slds__arrow):not(.t1196__control):not(.t-carousel__control),
.t-btn.t-btnflex,
.t-form__submit .t-submit,
input.t-submit {
    border-radius: var(--resoma-radius-btn) !important;
    font-family: var(--resoma-font) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, color 0.15s ease,
        border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Цвет по умолчанию: primary-кнопка как в приложении.
   Двойная специфичность бьёт библиотечные дефолты Тильды, но НЕ трогает
   явные настройки цвета блока (rec-scoped CSS Тильды сильнее — так и надо). */
a.t-btn.t-btnflex,
button.t-btn.t-btnflex,
.t-card__btn.t-btnflex,
.t-form__submit .t-btn,
.t-form__submit .t-submit {
    background-color: var(--resoma-primary);
    color: var(--resoma-white);
    border: 0;
}

a.t-btn.t-btnflex:hover,
button.t-btn.t-btnflex:hover,
.t-card__btn.t-btnflex:hover,
.t-form__submit .t-btn:hover,
.t-form__submit .t-submit:hover {
    background-color: var(--resoma-primary-hover);
    color: var(--resoma-white);
}

/* Текстовая кнопка-ссылка (= вариант link в приложении).
   Инвариант: надпись ВНУТРИ цветной кнопки (.t-btnflex .t-btntext) всегда
   следует цвету кнопки — акцент применяется только к standalone-ссылкам. */
.t-btntext {
    font-family: var(--resoma-font) !important;
    color: var(--resoma-primary);
    text-underline-offset: 4px;
    transition: color 0.15s ease;
}
.t-btntext:hover {
    color: var(--resoma-primary-hover);
    text-decoration: underline;
}
.t-btnflex .t-btntext,
.t-btn .t-btntext {
    color: inherit !important;
    text-decoration: none !important;
}

/* ----------------------------------------------------------------------------
   2. Карточки — белые, сильно скруглённые, с мягкой бордовой тенью
      (= ProductCard / catalog-*-card в приложении)
   ---------------------------------------------------------------------------- */
.t-card__col {
    border-radius: var(--resoma-radius-card);
    background-color: var(--resoma-white);
    box-shadow: var(--resoma-shadow-card);
    overflow: hidden;
}

/* ----------------------------------------------------------------------------
   3. Типографика — Montserrat, фирменный бордовый по умолчанию
   ---------------------------------------------------------------------------- */
body {
    font-family: var(--resoma-font);
    color: var(--resoma-fg);
}

.t-title,
.t-name,
.t-descr,
.t-text,
.t-uptitle,
.t-section__title,
.t-card__title {
    font-family: var(--resoma-font) !important;
}

.t-title,
.t-name,
.t-descr,
.t-text {
    color: var(--resoma-fg);
}

/* Ссылки в тексте — акцентные, с подчёркиванием на ховере */
.t-descr a,
.t-text a {
    color: var(--resoma-primary);
    text-underline-offset: 4px;
}
.t-descr a:hover,
.t-text a:hover {
    color: var(--resoma-primary-hover);
    text-decoration: underline;
}

/* Пункты подменю: ховер — акцентный */
.t-menusub__link-item:hover {
    color: var(--resoma-primary);
}

/* ----------------------------------------------------------------------------
   4. Формы — поля как Input приложения (на будущее: попапы, регистрации)
   ---------------------------------------------------------------------------- */
.t-input,
.t-textarea {
    border-radius: var(--resoma-radius-field) !important;
    border: 1px solid rgba(62, 11, 35, 0.12);
    background-color: var(--resoma-white);
    color: var(--resoma-fg);
    font-family: var(--resoma-font) !important;
}
.t-input:focus,
.t-textarea:focus {
    border-color: var(--resoma-primary);
    outline: none;
}
.t-input::placeholder,
.t-textarea::placeholder {
    color: rgba(62, 11, 35, 0.4);
}

/* ----------------------------------------------------------------------------
   5. Доступность и мелочи
   ---------------------------------------------------------------------------- */
.t-btn:focus-visible,
.t-btnflex:focus-visible,
.t-btntext:focus-visible,
.t-input:focus-visible,
.t-textarea:focus-visible {
    outline: 2px solid var(--resoma-primary);
    outline-offset: 2px;
}

::selection {
    background: rgba(155, 54, 38, 0.2);
}

/* ----------------------------------------------------------------------------
   6. Модификаторы для кастомных кнопок (T123 / Zero Block):
      добавить класс элементу — получить вариант кнопки из ДС.
   ---------------------------------------------------------------------------- */
/* Вторичная кнопка: бежевая подложка, бордовый текст */
.t-btn.uc-btn-secondary,
.t-btn.t-btnflex.uc-btn-secondary {
    background-color: var(--resoma-secondary);
    color: var(--resoma-primary);
}
.t-btn.uc-btn-secondary:hover,
.t-btn.t-btnflex.uc-btn-secondary:hover {
    background-color: var(--resoma-secondary-hover);
    color: var(--resoma-primary);
}

/* «Призрачная» кнопка: светлая подложка, бордовый текст */
.t-btn.uc-btn-ghost,
.t-btn.t-btnflex.uc-btn-ghost {
    background-color: var(--resoma-ghost);
    color: var(--resoma-primary);
}
.t-btn.uc-btn-ghost:hover,
.t-btn.t-btnflex.uc-btn-ghost:hover {
    background-color: var(--resoma-secondary);
    color: var(--resoma-primary);
}