/* ============================================================
   firmbaza — слой дизайн-токенов (fb-tokens.css)
   ------------------------------------------------------------
   Единая точка правды для цвета, типографики, радиусов и теней.
   Подключается ПЕРВЫМ, до остальных стилей.

   ВАЖНО про каскад. Этот файл грузится первым, поэтому он самый
   слабый в цепочке: почти любое правило из firmbaza-apple.css,
   marketplace-product.css или visual-design.css его перекрывает
   (они идут позже и почти везде используют !important).
   Поэтому здесь НЕТ переопределений цвета кнопок: они бы стали
   мёртвым кодом. Исправления контраста сделаны там, где правило
   реально побеждает — в firmbaza-apple.css.
   Исключение — компонент демо-таблиц ниже: там селекторы
   намеренно усилены, чтобы выигрывать по специфичности.

   Принцип разделения цветов:
     --jq-coral     — декоративный коралл (blob, тени, границы).
                      Контраст не важен, значение исходное.
     --jq-coral-aa  — тот же оттенок, затемнённый до >= 4.5:1
                      с белым. Для фона под белым текстом.
   ============================================================ */

:root {
  /* ---------- Бренд: декоративные (контраст не критичен) ---------- */
  --jq-coral: #ff5b2e;
  --jq-pink: #ff5fa2;
  --jq-violet: #7b5cff;
  --jq-lime: #c8f04b;
  --jq-yellow: #ffc531;
  --jq-blue: #2e5bff;
  --jq-ink: #0f172a;
  --jq-grad: linear-gradient(120deg, #ff5b2e 0%, #ff5fa2 32%, #7b5cff 65%, #2e5bff 100%);

  /* ---------- Бренд: варианты под белый текст ----------
     В скобках — проверенный контраст с #fff.                 */
  --jq-coral-aa: #db2f00;   /* 4.75:1 — было #ff5b2e (3.09:1) */
  --jq-pink-aa: #e4005f;    /* 4.70:1 — было #ff5fa2 (2.83:1) */
  --jq-violet-aa: #6d4cf2;  /* 5.29:1 — было #7b5cff (4.36:1) */
  --jq-blue-aa: #2e5bff;    /* 5.18:1 — уже проходит          */

  /* ---------- CTA «Купить»: красный градиент ----------
     Применяются в firmbaza-apple.css, где правило побеждает. */
  --fb-cta-top: #e12121;        /* 4.73:1 — было #ef4444 (3.76:1) */
  --fb-cta-mid: #dc2626;        /* 4.83:1 */
  --fb-cta-deep: #b91c1c;       /* 6.47:1 */
  --fb-cta-top-hover: #e12b2b;  /* 4.58:1 — было #f87171 (2.77:1) */
  --fb-cta-deep-hover: #991b1b; /* 8.31:1 */

  /* ---------- Текстовая иерархия ---------- */
  --fb-text-primary: #0f172a;
  --fb-text-secondary: #334155;
  --fb-text-muted: #64748b;
  --fb-text-on-dark: #e2e8f0;
  --fb-text-on-dark-muted: #94a3b8;

  /* ---------- Радиусы ---------- */
  --fb-radius-sm: 8px;
  --fb-radius-md: 12px;
  --fb-radius-lg: 16px;
  --fb-radius-xl: 24px;
  --fb-radius-full: 9999px;

  /* ---------- Тени ---------- */
  --fb-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
  --fb-shadow-md: 0 4px 12px rgb(0 0 0 / .08);
  --fb-shadow-lg: 0 12px 28px rgb(0 0 0 / .12);
  --fb-shadow-xl: 0 20px 40px rgb(0 0 0 / .15);
  --fb-shadow-hard: 6px 6px 0 #0f172a;

  /* ---------- Типографика ----------
     Один источник вместо семи разных font-family на странице. */
  --fb-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fb-font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --fb-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* ---------- Переходы ---------- */
  --fb-transition-fast: 100ms ease-out;
  --fb-transition: 150ms ease-out;
  --fb-transition-slow: 250ms ease-out;

  /* ---------- Демо-таблицы (превью данных) ---------- */
  --fb-demo-empty: #64797f;      /* 4.58:1 — прочерк в пустой ячейке */
  --fb-demo-row-alt: #fafcfc;
  --fb-demo-row-hover: #eef6f6;
  --fb-demo-clip: 24ch;          /* предел ширины текстовой колонки */
}

/* ============================================================
   Демо-таблицы: единый компонент.
   Классы ozon-demo-*, wb-demo-*, ym-demo-*, sm-demo-*, tg-demo-*
   исторически описывают одно и то же. Новый код использует
   fb-demo-*, старые имена перечислены для совместимости.

   Селекторы начинаются с `body .mp-product`, чтобы обойти по
   специфичности правило marketplace-product.css:
     body .mp-product .ozon-demo-table td { white-space: nowrap }
   спецификой (0,2,2). Наши — (0,3,2) и выше.
   ============================================================ */

/* Прочерк в пустой ячейке вместо визуальной «дыры» */
body .mp-product .fb-demo-table td.fb-demo-empty,
body .mp-product .ozon-demo-table td.demo-cell-empty,
body .mp-product .wb-demo-table td.demo-cell-empty,
body .mp-product .ym-demo-table td.demo-cell-empty,
body .mp-product .sm-demo-table td.demo-cell-empty,
body .mp-product .tg-demo-table td.demo-cell-empty,
.fb-demo-table td.fb-demo-empty,
.ozon-demo-table td.demo-cell-empty {
  color: var(--fb-demo-empty);
  text-align: center;
}

/* Плотность: длинные значения обрезаются, а не растягивают таблицу
   на несколько экранов. Полный текст остаётся в атрибуте title. */
body .mp-product .fb-demo-table td.fb-demo-clip,
body .mp-product .ozon-demo-table td.fb-demo-clip,
body .mp-product .wb-demo-table td.fb-demo-clip,
body .mp-product .ym-demo-table td.fb-demo-clip,
body .mp-product .sm-demo-table td.fb-demo-clip,
body .mp-product .tg-demo-table td.fb-demo-clip,
.fb-demo-table td.fb-demo-clip,
.ozon-demo-table td.fb-demo-clip {
  max-width: var(--fb-demo-clip);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Зебра: глаз не теряет строку при горизонтальном скролле */
body .mp-product .fb-demo-table tbody tr:nth-child(even) > td,
body .mp-product .ozon-demo-table tbody tr:nth-child(even) > td,
body .mp-product .wb-demo-table tbody tr:nth-child(even) > td,
body .mp-product .ym-demo-table tbody tr:nth-child(even) > td {
  background: var(--fb-demo-row-alt);
}
body .mp-product .fb-demo-table tbody tr:hover > td,
body .mp-product .ozon-demo-table tbody tr:hover > td,
body .mp-product .wb-demo-table tbody tr:hover > td,
body .mp-product .ym-demo-table tbody tr:hover > td {
  background: var(--fb-demo-row-hover);
}

/* ============================================================
   Уважение к prefers-reduced-motion.
   На сайте есть бегущая строка, плавающие блобы и зумы фото —
   при системной настройке «меньше движения» их нужно погасить.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}