:root {
  /* --- Цвета: примитивы --- */
  --bb-ink: #0c1323;
  --bb-white-pill: #f5f6fa;
  --bb-marine: #0d1b2e;
  --bb-marine-light: #223556;
  --bb-blue-light: #e8eefb;
  --bb-accent: #344a9a;
  --bb-secondary-bg-light: #e4e8f0;

  /* --- Текст (свой набор под каждую тему блока) --- */
  --bb-text-primary-light: #0c1323;
  --bb-text-primary-dark: #f5f6fa;
  --bb-text-secondary-light: #323e4f;
  --bb-text-secondary-dark: #c4c9d2;

  /* --- Кнопки --- */
  --bb-btn-primary-bg: #f5f6fa;
  --bb-btn-primary-text: #0c1323;
  --bb-btn-secondary-bg-light: #e4e8f0;
  --bb-btn-secondary-text-light: #0c1323;
  --bb-btn-secondary-bg-dark: #223556;
  --bb-btn-secondary-text-dark: #f5f6fa;

  /* --- Blues, шкала 100 (тёмный) → 900 (светлый) --- */
  --bb-blue-100: #122036;
  --bb-blue-200: #1f365c;
  --bb-blue-300: #2d4b82;
  --bb-blue-400: #3a5fa8;
  --bb-blue-500: #5377c3;
  --bb-blue-600: #7a94d0;
  --bb-blue-700: #a0b1dd;
  --bb-blue-800: #c6d0ea;
  --bb-blue-900: #eceff8;

  /* --- Arrows --- */
  --bb-arrow-default-on-dark: #4a5a75;
  --bb-arrow-default-on-light: #8fa3c4;
  --bb-arrow-hover: #344a9a; /* alias accent */

  /* --- Типографика --- */
  --bb-font-header: 'WDXL Lubrifont SC', sans-serif;
  --bb-font-body: 'Inter', sans-serif;
  --bb-letter-spacing: -0.02em;

  /* --- Сетка: значения по умолчанию = Mobile --- */
  --bb-columns: 4;
  --bb-margin: 16px;
  --bb-gutter: 24px;
  --bb-container-max: none;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Tablet */
  :root {
    --bb-columns: 4;
    --bb-margin: 28px;
    --bb-gutter: 24px;
  }
}



@media (min-width: 1024px) {
  /* Desktop S / Desktop L: сетка одна и та же, меняется только контейнер */
  :root {
    --bb-columns: 16;
    --bb-margin: 20px;
    --bb-gutter: 24px;
    --bb-container-max: 1536px;
  }
}

/* Утилита-контейнер: тянется на 100% до 1536px, дальше центрируется с fixed max-width */
.bb-container {
  width: 100%;
  max-width: var(--bb-container-max, none);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bb-margin);
  padding-right: var(--bb-margin);
  box-sizing: border-box;
}

.bb-grid {
  display: grid;
  grid-template-columns: repeat(var(--bb-columns), 1fr);
  gap: var(--bb-gutter);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ХОВЕР КНОПОК — добавка к global.css.
   Единственное место, где живёт механика ховера. Дописывается в конец того
   global.css, что стоит на Tilda; новые кнопки правим здесь же.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Такт ховера — общий для всех кнопок. Дописывается в существующий :root. */
:root {
  --bb-hover-duration: 320ms;
  --bb-hover-ease: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic */
}

.bb-btn-sweep {
  background-image: linear-gradient(to top,
                                    var(--bb-sweep-fill, var(--bb-blue-200)) 50%,
                                    transparent 50%);
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: 50% 0%;    /* видна прозрачная половина */
  transition:
    background-position var(--bb-hover-duration) var(--bb-hover-ease),
    color var(--bb-hover-duration) var(--bb-hover-ease);
}

.bb-btn-sweep .bb-sweep-tile {
  transition: fill var(--bb-hover-duration) var(--bb-hover-ease);
}

.bb-btn-sweep .bb-sweep-glyph {
  transition: stroke var(--bb-hover-duration) var(--bb-hover-ease);
}

/* hover: hover — чтобы на тапе по мобиле состояние не залипало до следующего тапа. */
@media (hover: hover) {
  .bb-btn-sweep:hover { background-position: 50% 100%; color: var(--bb-sweep-text, var(--bb-white-pill)); }
  .bb-btn-sweep:hover .bb-sweep-tile { fill: var(--bb-sweep-tile, var(--bb-blue-600)); }
  .bb-btn-sweep:hover .bb-sweep-glyph { stroke: var(--bb-sweep-glyph, var(--bb-ink)); }
}

/* Клавиатура получает то же состояние, что и мышь. */
.bb-btn-sweep:focus-visible { background-position: 50% 100%; color: var(--bb-sweep-text, var(--bb-white-pill)); }
.bb-btn-sweep:focus-visible .bb-sweep-tile { fill: var(--bb-sweep-tile, var(--bb-blue-600)); }
.bb-btn-sweep:focus-visible .bb-sweep-glyph { stroke: var(--bb-sweep-glyph, var(--bb-ink)); }

@media (prefers-reduced-motion: reduce) {
  .bb-btn-sweep,
  .bb-btn-sweep .bb-sweep-tile,
  .bb-btn-sweep .bb-sweep-glyph { transition-duration: 1ms; }
}

.no-wrap { white-space: nowrap; }