@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   FOXISE — единая система токенов
   Версия 1.0

   Куда вставлять:
   Tilda → Настройки сайта → Ещё → HTML-код для вставки внутрь HEAD
   Обернуть в  ... 

   Web-версия (healthfoxise.com): подключить этот же файл как первый импорт,
   чтобы Tilda и приложение шли от одного источника правды.

   Структура файла:
   1. Токены          — читать и использовать, не менять по месту
   2. Шрифты          — Georgia (display) + Inter (UI)
   3. Нормализация    — радиусы, кнопки, ссылки Tilda. Безопасно.
   4. Компоненты      — классы для зеро-блоков (T123)
   5. Опциональный    — жёсткая унификация синего. Включать осознанно.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ТОКЕНЫ
   -------------------------------------------------------------------------- */

:root {

  /* Бренд. Один синий. Всё остальное — производные.
     Если нужен новый оттенок синего — его нет. Берём из этих пяти. */
  --fox-brand:            #2F66D6;
  --fox-brand-hover:      #2552AB;
  --fox-brand-deep:       #1E4EB8;
  --fox-brand-tint:       #E7EEF8;
  --fox-brand-tint-soft:  #F4F7FD;

  /* Нейтральные. Только тёплый ряд.
     Холодные слейт-серые (#1D2537, #8391A6, #B9C4D4) выведены из системы —
     тёплое рядом с холодным читается как грязное. */
  --fox-ink:              #33251A;  /* заголовки, основной текст */
  --fox-ink-soft:         #6B6055;  /* подписи, вторичный текст */
  --fox-ink-muted:        #9A9086;  /* плейсхолдеры, мета */
  --fox-line:             #E8DFD1;  /* границы, разделители */
  --fox-surface:          #F3EFE9;  /* фон секции */
  --fox-canvas:           #FDFBF7;  /* фон страницы */
  --fox-card:             #FFFFFF;  /* фон карточки */

  /* Статусы. По одному цвету на состояние, не по три.
     bg — фон плашки, ink — текст на этом фоне (не чёрный). */
  --fox-ok:               #2FA56A;
  --fox-ok-bg:            #E6F3EC;
  --fox-ok-ink:           #1B6B45;

  --fox-watch:            #E08A3C;
  --fox-watch-bg:         #F7ECDE;
  --fox-watch-ink:        #8A5418;

  --fox-alert:            #E0574C;
  --fox-alert-bg:         #FBE9E7;
  --fox-alert-ink:        #9E2F26;

  /* Радиус. Три значения. 11, 13, 14, 18, 22, 25 больше не существуют. */
  --fox-r-sm:             8px;      /* инпуты, мелкие плашки */
  --fox-r-md:             16px;     /* карточки, секции */
  --fox-r-pill:           999px;    /* кнопки, бейджи, аватары */

  /* Шаг сетки. Всё кратно 4. */
  --fox-s-1:              4px;
  --fox-s-2:              8px;
  --fox-s-3:              12px;
  --fox-s-4:              16px;
  --fox-s-5:              24px;
  --fox-s-6:              32px;
  --fox-s-7:              48px;
  --fox-s-8:              64px;

  /* Типографика. Два семейства. Nunito и Arial выведены из системы. */
  --fox-font-display:     Georgia, 'Times New Roman', serif;
  --fox-font-ui:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fox-t-h1:             40px;
  --fox-t-h2:             30px;
  --fox-t-h3:             22px;
  --fox-t-body:           16px;
  --fox-t-sm:             14px;
  --fox-t-xs:             12px;

  --fox-lh-tight:         1.2;      /* заголовки */
  --fox-lh-body:          1.6;      /* текст */

  /* Тень. Одна, тёплая. Чёрная тень на кремовом фоне выглядит грязно. */
  --fox-shadow:           0 2px 8px rgba(51, 37, 26, 0.06);
  --fox-shadow-lift:      0 6px 20px rgba(51, 37, 26, 0.10);

  /* Анимация */
  --fox-ease:             200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 640px) {
  :root {
    --fox-t-h1: 28px;
    --fox-t-h2: 23px;
    --fox-t-h3: 19px;
  }
}


/* --------------------------------------------------------------------------
   2. ШРИФТЫ
   Строка @import с Inter вынесена в самое начало файла — по стандарту CSS
   она обязана идти первой, иначе браузер её молча игнорирует.
   Не переставляй её вниз.
   -------------------------------------------------------------------------- */

/* Подменяем дефолтный шрифт Tilda целиком */
:root {
  --t-text-font: var(--fox-font-ui);
}

body,
.t-text,
.t-descr,
.t-name,
.t-btn,
.t-submit,
.t-menu__link-item {
  font-family: var(--fox-font-ui);
}

h1, h2, h3,
.t-title,
.t-heading {
  font-family: var(--fox-font-display);
  line-height: var(--fox-lh-tight);
  letter-spacing: -0.01em;
  color: var(--fox-ink);
}


/* --------------------------------------------------------------------------
   3. НОРМАЛИЗАЦИЯ TILDA
   Безопасный слой: трогает форму и типографику, не трогает цвета блоков.
   -------------------------------------------------------------------------- */

/* Радиусы к шкале. Ловит 11/12/13/14/18/20/22/24/25px из блоков. */
.t-btn,
.t-submit,
.t-input,
.t-inputtext,
.t-select {
  border-radius: var(--fox-r-pill);
  font-family: var(--fox-font-ui);
  transition: var(--fox-ease);
}

.t-card__col,
.t-feed__post,
.t-store__card,
.t-popup__container,
.t-slds__item {
  border-radius: var(--fox-r-md);
}

.t-input,
.t-inputtext,
.t-select {
  border-radius: var(--fox-r-sm);
  border: 1px solid var(--fox-line);
  font-size: var(--fox-t-body);
  color: var(--fox-ink);
}

.t-input:focus,
.t-inputtext:focus {
  border-color: var(--fox-brand);
  outline: 2px solid var(--fox-brand-tint);
  outline-offset: 0;
}

/* Границы и разделители — тёплые, не серые */
hr,
.t-divider,
.t-card__col,
.t-feed__post {
  border-color: var(--fox-line);
}

/* Ссылки в тексте */
.t-text a:not(.t-btn),
.t-descr a:not(.t-btn) {
  color: var(--fox-brand);
  text-decoration-color: var(--fox-brand-tint);
  text-underline-offset: 3px;
}

.t-text a:not(.t-btn):hover,
.t-descr a:not(.t-btn):hover {
  color: var(--fox-brand-hover);
}

/* Доступность: видимый фокус с клавиатуры */
a:focus-visible,
button:focus-visible,
.t-btn:focus-visible {
  outline: 2px solid var(--fox-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* --------------------------------------------------------------------------
   4. КОМПОНЕНТЫ ДЛЯ ЗЕРО-БЛОКОВ (T123)
   Вешать классы на элементы вместо ручных цветов в панели Tilda.
   -------------------------------------------------------------------------- */

.fox-card {
  background: var(--fox-card);
  border: 1px solid var(--fox-line);
  border-radius: var(--fox-r-md);
  padding: var(--fox-s-4);
  box-shadow: var(--fox-shadow);
}

.fox-card--flat {
  box-shadow: none;
  background: var(--fox-surface);
  border-color: transparent;
}

/* Бейдж состояния показателя */
.fox-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--fox-r-pill);
  font-size: var(--fox-t-xs);
  font-family: var(--fox-font-ui);
  white-space: nowrap;
}

.fox-badge--ok    { background: var(--fox-ok-bg);    color: var(--fox-ok-ink); }
.fox-badge--watch { background: var(--fox-watch-bg); color: var(--fox-watch-ink); }
.fox-badge--alert { background: var(--fox-alert-bg); color: var(--fox-alert-ink); }
.fox-badge--soon  { background: var(--fox-surface);  color: var(--fox-ink-soft); }

/* Кнопки */
.fox-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--fox-r-pill);
  font-size: var(--fox-t-body);
  font-family: var(--fox-font-ui);
  text-decoration: none;
  transition: var(--fox-ease);
  cursor: pointer;
  border: 1px solid transparent;
}

.fox-btn--primary {
  background: var(--fox-brand);
  color: #FFFFFF;
}
.fox-btn--primary:hover { background: var(--fox-brand-hover); }

.fox-btn--secondary {
  background: transparent;
  color: var(--fox-brand);
  border-color: var(--fox-brand);
}
.fox-btn--secondary:hover { background: var(--fox-brand-tint); }

/* Аватар профиля */
.fox-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--fox-r-pill);
  background: var(--fox-brand-tint);
  color: var(--fox-brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fox-t-sm);
  flex: none;
}

/* Текстовые роли */
.fox-eyebrow {
  font-size: var(--fox-t-xs);
  color: var(--fox-ink-soft);
  letter-spacing: 0.04em;
}
.fox-muted { color: var(--fox-ink-soft); font-size: var(--fox-t-sm); }


/* --------------------------------------------------------------------------
   5. ОПЦИОНАЛЬНЫЙ БЛОК — жёсткая унификация синего
   Убирает разнобой #2E6FE3 / #2F74F2 / #327AFF / #1F5BFF в готовых блоках,
   которые сейчас правятся только руками в панели.

   Включать после того, как посмотришь сайт с блоками 1–4.
   Может перекрасить кнопки, которые задуманы как вторичные.
   Проверить: главная, тарифы, калькулятор, блог.
   -------------------------------------------------------------------------- */