/* ============================================================================
   TSD-Эксперт — демо AI-поиска. Дизайн-токены.
   Светлая тема. Источник визуала: tsd-expert.ru (тёмная шапка, красный логотип,
   оранжево-красные акценты, светло-серые поверхности).
   Шрифт — гуманистический гротеск Manrope (подключается в app.css через @import).
   Все компоненты в app.css опираются только на эти переменные.
   ========================================================================== */

:root {
  /* --- Бренд / акценты --------------------------------------------------- */
  --tsd-orange:        #fb8400; /* основной акцент: кнопки, активные состояния */
  --tsd-orange-600:    #e07600; /* hover/нажатие оранжевого */
  --tsd-orange-050:    #fff3e3; /* мягкая оранжевая подложка (чипы, бейджи) */
  --tsd-red:           #e20000; /* красный акцент: логотип, распродажа, ошибки */
  --tsd-red-600:       #c30000; /* hover красного */
  --tsd-red-050:       #fdecec; /* мягкая красная подложка */
  --tsd-logo-red:      #e3000b; /* точный красный плашки логотипа (из svg) */

  /* --- Нейтральные поверхности и текст ----------------------------------- */
  --tsd-bg:            #f5f7f9; /* фон страницы (светло-серый) */
  --tsd-surface:       #ffffff; /* карточки, панели, модалки */
  --tsd-surface-2:     #f0f2f5; /* вторичная поверхность, ховер-строки */
  --tsd-surface-3:     #e8ebee; /* выделенные блоки, скелетоны */
  --tsd-header-bg:     #2b2f33; /* тёмная шапка сайта */
  --tsd-header-bg-2:   #23272b; /* нижний слой шапки / категории-бар */

  --tsd-text:          #2b2622; /* основной тёмный текст */
  --tsd-text-2:        #595651; /* вторичный серый текст */
  --tsd-text-3:        #8c8a86; /* приглушённый (плейсхолдеры, мета) */
  --tsd-text-on-dark:  #f4f5f6; /* текст на тёмной шапке */
  --tsd-text-on-accent:#ffffff; /* текст на оранжевом/красном */

  --tsd-line:          #d6d6d6; /* основные линии и рамки */
  --tsd-line-2:        #e6e8ea; /* мягкие разделители */
  --tsd-line-strong:   #bfc2c5; /* акцентные рамки (фокус-нейтраль) */

  /* --- Статусы ----------------------------------------------------------- */
  --tsd-success:       #2e9e5b;
  --tsd-success-050:   #e8f6ee;
  --tsd-warning:       #fb8400;
  --tsd-info:          #2f6fed;
  --tsd-info-050:      #eaf1fe;

  /* --- Типографика ------------------------------------------------------- */
  --tsd-font:          'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --tsd-font-mono:     ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --tsd-fs-xs:         12px;
  --tsd-fs-sm:         13px;
  --tsd-fs-base:       15px;
  --tsd-fs-md:         16px;
  --tsd-fs-lg:         18px;
  --tsd-fs-xl:         22px;
  --tsd-fs-2xl:        28px;
  --tsd-fs-3xl:        34px;

  --tsd-fw-regular:    400;
  --tsd-fw-medium:     500;
  --tsd-fw-semibold:   600;
  --tsd-fw-bold:       700;
  --tsd-fw-extrabold:  800;

  --tsd-lh-tight:      1.2;
  --tsd-lh-normal:     1.45;
  --tsd-lh-relaxed:    1.6;
  --tsd-ls-caps:       0.04em; /* трекинг для КАПСА в категориях/бейджах */

  /* --- Скругления -------------------------------------------------------- */
  --tsd-radius-xs:     4px;
  --tsd-radius-sm:     6px;
  --tsd-radius-md:     10px;  /* карточки, инпуты, кнопки */
  --tsd-radius-lg:     14px;  /* панели, модалки */
  --tsd-radius-xl:     20px;  /* крупные блоки */
  --tsd-radius-pill:   999px; /* чипы, таблетки, сегмент-контрол */

  /* --- Тени -------------------------------------------------------------- */
  --tsd-shadow-xs:     0 1px 2px rgba(20, 22, 24, 0.06);
  --tsd-shadow-sm:     0 1px 3px rgba(20, 22, 24, 0.08), 0 1px 2px rgba(20, 22, 24, 0.04);
  --tsd-shadow-md:     0 4px 12px rgba(20, 22, 24, 0.10);
  --tsd-shadow-lg:     0 12px 32px rgba(20, 22, 24, 0.16);
  --tsd-shadow-accent: 0 6px 16px rgba(251, 132, 0, 0.28); /* подсветка оранжевой кнопки */
  --tsd-overlay-bg:    rgba(24, 26, 28, 0.55); /* затемнение под модалкой */

  /* --- Спейсинг (шаг 4px) ------------------------------------------------ */
  --tsd-space-1:       4px;
  --tsd-space-2:       8px;
  --tsd-space-3:       12px;
  --tsd-space-4:       16px;
  --tsd-space-5:       20px;
  --tsd-space-6:       24px;
  --tsd-space-8:       32px;
  --tsd-space-10:      40px;
  --tsd-space-12:      48px;
  --tsd-space-16:      64px;

  /* --- Раскладка --------------------------------------------------------- */
  --tsd-container:     1200px; /* макс. ширина контента */
  --tsd-gutter:        20px;   /* боковые поля контейнера */
  --tsd-grid-gap:      16px;   /* зазор в сетке товаров */
  --tsd-card-min:      230px;  /* мин. ширина карточки в auto-fill сетке */

  /* --- Переходы ---------------------------------------------------------- */
  --tsd-ease:          cubic-bezier(0.2, 0.6, 0.2, 1);
  --tsd-dur-fast:      120ms;
  --tsd-dur:           180ms;
  --tsd-dur-slow:      260ms;

  /* --- Слои (z-index) ---------------------------------------------------- */
  --tsd-z-header:      100;
  --tsd-z-dropdown:    200;
  --tsd-z-overlay:     1000;
  --tsd-z-modal:       1010;
  --tsd-z-toast:       1100;
}

/* --- Брейкпоинты (для справки фронт-агентам, медиа-запросы в app.css) -----
   sm:  ≤ 640px   — мобайл: одна колонка, без горизонтального скролла
   md:  ≤ 900px   — планшет: сжатая шапка, поиск на всю ширину
   lg:  ≤ 1200px  — десктоп от контейнера
   --------------------------------------------------------------------------- */