/**
 * Breakpoints (mobile-first) — единый справочник для CSS.
 *
 * Кастомные media-query переменные в CSS пока не везде поддерживаются
 * как значение в @media, поэтому якоря — комментарии вида: @bp-md / @bp-wide.
 * JS-layout: см. frontend_build/js/adaptive.js (BREAKPOINTS).
 *
 * Канон Voltark (не смешивать!):
 *   --bp-sm:      480px   large phone
 *   --bp-md:      768px   CSS/JS mobile↔tablet (adaptive.js tablet)
 *   --bp-tablet:  900px   JS-tablet / исторический CSS-канон (38× max-width:900)
 *   --bp-lg:     1024px   laptop (adaptive.js laptop / desktop-layout)
 *   --bp-xl:     1280px   desktop
 *   --bp-2xl:    1920px   wide
 *   --bp-3xl:    2560px   ultrawide
 *
 * Диапазоны (документация; поведение не менять):
 *   mobile   < 768
 *   tablet   768–900     (узкий tablet; CSS часто режет уже на 900)
 *   desktop  901–1024    (пара к max-width:900 → min-width:901, без дыры)
 *   laptop+  ≥ 1024
 *
 * Пара 900 max / 901 min: смежные целые px, пересечений нет, дыры на 900.5 нет.
 *
 * Этап 3.2 — вторичные (НЕ snap к канону: сдвиг порога ломает вёрстку):
 *   --bp-compact:    560   auth QR / library news
 *   --bp-phone:      640   bento / voice / gif / settings
 *   --bp-narrow:     720   inventory / community / rewards (ниже --bp-md)
 *   --bp-window:     800   ≈ WINDOW_MIN; tablet req/market/dl
 *   --bp-lib:        960   library-hub → 1 col
 *   --bp-hero:       980   store hero stage
 *   --bp-content:   1000   community home/voice grids
 *   --bp-wide:      1100   bento / profile / forum / friends
 *   --bp-market-mid:1199   market 2-col (пара к 1200+/900)
 *
 * Отложено (1× / стек-зависимые) — TODO, значения не трогать:
 *   360  — adaptive/fixes ultra-narrow chrome
 *   420  — header user-name / balance truncate
 *   700  — pages-wave10 birthday cols
 *   760  — add-friend body/preview
 *   1200 — community-compact padding (не путать с market 1200+)
 *
 * TODO: Свести 15 breakpoints к 6–8, когда UI стабилизируется.
 *       Не сейчас — потребует визуальной проверки.
 */

:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-tablet: 900px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1920px;
  --bp-3xl: 2560px;

  /* Secondary — Stage 3.2 (документация + JS/будущий custom-media; @media пока literal) */
  --bp-compact: 560px;
  --bp-phone: 640px;
  --bp-narrow: 720px;
  --bp-window: 800px;
  --bp-lib: 960px;
  --bp-hero: 980px;
  --bp-content: 1000px;
  --bp-wide: 1100px;
  --bp-market-mid: 1199px;
}