/*
 * Buenos Padel — brand tokens.
 * Source of truth: guides/brandbook.html.
 * Loaded on every portal page; new components consume these vars.
 */

/*
 * WOFF2 первым, OTF — фолбэком (27.08.2026). Те же начертания, вдвое легче:
 * 231 864 → 121 748 Б на три файла, и это лучше, чем OTF под gzip (141 861 Б),
 * потому что WOFF2 уже несёт brotli внутри. Браузер берёт первый формат,
 * который понимает, поэтому OTF остаётся страховкой и его никто не качает.
 */
@font-face {
  font-family: 'Prostir Sans';
  src: url('/static/fonts/ProstirSans-900.woff2') format('woff2'),
       url('/static/fonts/ProstirSans-900.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Mori';
  src: url('/static/fonts/PPMori-400.woff2') format('woff2'),
       url('/static/fonts/PPMori-400.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Mori';
  src: url('/static/fonts/PPMori-600.woff2') format('woff2'),
       url('/static/fonts/PPMori-600.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typography roles */
  --ff-display: 'Prostir Sans', 'Arial Black', sans-serif;
  --ff-body: 'PP Mori', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Шкала размеров текста портала — восемь ступеней, как у iOS (caption2 …
   * title1). До неё портал набирался шестью десятками разных значений
   * (0.6rem … 1.85rem вперемешку с px), и один экран читался как «много
   * разных шрифтов». Ступень выбирается по роли, не по вкусу:
   *   micro      — подписи в чипах и бейджах
   *   caption    — подписи под полями, метки времени
   *   secondary  — вторичный текст, подзаголовки строк
   *   body       — основной текст, кнопки, поля
   *   h2         — заголовок секции, акцент в строке
   *   h3         — крупный заголовок карточки
   *   title      — заголовок экрана
   *   display    — крупные числа и hero-цифры (шрифт --ff-display)
   * Ниже micro текста на телефоне не бывает: 9–10 px не читаются. */
  --bp-fs-micro: 11px;
  --bp-fs-caption: 12px;
  --bp-fs-secondary: 13px;
  --bp-fs-body: 15px;
  --bp-fs-h2: 17px;
  --bp-fs-h3: 20px;
  --bp-fs-title: 22px;
  --bp-fs-display: 28px;

  /* Brand palette — canonical (paper / brandbook truth) */
  --bp-green: #79AC2B;
  --bp-green-dark: #5c8a1a;
  --bp-green-tint: #eef6e0;
  /* Same hue, lifted for legibility on slate surfaces */
  --bp-green-on-dark: #92c43a;
  --bp-green-on-dark-deep: #79ac2b;
  --bp-blue: #044184;
  --bp-blue-ink: #032e5e;
  --bp-blue-tint: #e6edf5;
  --bp-paper: #f4f1ea;
  /* v2 airy: #ebe6d9 → ближе к бумаге, второй слой тише */
  --bp-paper-2: #efeadd;
  --bp-ink: #17181a;
  /* v2 airy: #4b4d51 → чуть светлее, меньше шума второстепенного текста */
  --bp-ink-soft: #55575e;
  /* v2 airy: #8a8c92 → */
  --bp-muted: #96989e;
  /* v2 airy: #d9d3c2 → мягче разделители */
  --bp-line: #e2dccc;
  --bp-stamp-red: #a0301e;
  /* Warning palette — Bootstrap's default amber #ffc107 is unreadable on
   * the paper background. Use a deeper mustard tuned for legibility on
   * --bp-paper. `--bp-warning-bg` is the soft-tint cell highlight used
   * in tables/cards (e.g. discount-training column group). */
  --bp-warning: #b07a1f;
  --bp-warning-deep: #8a5e15;
  --bp-warning-fill: #e3a833;
  --bp-warning-bg: #f3dba0;
  --bp-warning-tint: #f9e9c2;

  /* ---- Airy pass v2 (Claude Design) — новые токены ---- */
  --bp-sheet: #ffffff;        /* белый «лист»: карточки, виджеты, модалки */
  --bp-red-tint: #f9e9e6;     /* мягкий фон долга/опасности */
  --bp-line-strong: #cfc8b6;  /* акцентные разделители (thead, статус-бары) */
  --bp-shadow-card: 0 1px 2px rgba(23, 24, 26, 0.04);
  --bp-shadow-pop: 0 12px 32px rgba(23, 24, 26, 0.10);
  --bp-shadow-modal: 0 24px 64px rgba(23, 24, 26, 0.14);

  /* ---- v3 modern (Claude Design) ----
   * Единый гротеск: весь UI — PP Mori; Prostir Sans только заголовки/крупные числа;
   * JetBrains Mono остаётся только для чеков/табуляции цифр.
   * Скругления вместо радиуса 0. */
  --ff-ui: var(--ff-body);
  --bp-radius-lg: 14px;  /* карточки, виджеты, модалки */
  --bp-radius: 10px;     /* алерты, дропдауны */
  --bp-radius-sm: 8px;   /* кнопки, поля, контролы */

  /* ---- v3.1: токены по заявкам token-свипа (10 агентов, 2026-07-04) ---- */
  --bp-radius-xs: 4px;            /* плотная сетка журнала, мелкие свотчи */
  --bp-on-accent: #ffffff;        /* текст на акцентных заливках (blue/green/red) */
  --bp-purple: #7c3aed;           /* группы/турниры — акцент событий с местами */
  --bp-purple-tint: #f1e8fb;
  --bp-orange: #fd7e14;           /* середина severity-шкалы warning→orange→danger */
  --bp-orange-tint: #fdecdc;      /* мягкий фон «не оплачено» (журнал) — в ряду green/red/warning-tint */
  --bp-focus-ring: rgba(4, 65, 132, 0.15);   /* брендовое фокус-кольцо (из --bp-blue) */
  --bp-shadow-hover: 0 2px 8px rgba(23, 24, 26, 0.08);  /* hover-элевация чипов/карточек */

  /* ---- Вертикальный ритм (2026-09-10) ----
   * Шесть ступеней, кратных четырём. Имя = множитель: `--bp-space-3` = 12px.
   * Имена НЕ по роли: ролей больше, чем ступеней, и семантические алиасы
   * («--bp-space-section») завели бы второй словарь поверх этого.
   *
   * Заводились по замеру портала: 68 различных вертикальных значений на 1796
   * использований, из них ~190 — подобранные на глаз 3/5/7/9/11/13 px. Один
   * и тот же зазор «между блоками» встречался двенадцатью разными числами.
   *
   * Роль → ступень (таблица и есть дока, держите её в актуальном виде):
   *   верх страницы под шапкой ........ 4  (16)
   *   низ над нижним меню, сверх его высоты .. 6  (24)
   *   заголовок страницы → контент .... 4  (16)
   *   заголовок секции: сверху / снизу . 6 / 2  (24 / 8)
   *   блок → блок ..................... 3  (12)
   *   строка → строка в плотном списке . 2  (8)
   *   карточка-секция → карточка-секция  3  (12)
   *   вертикальный паддинг карточки ... 4, плотной строки 3  (16 / 12)
   *   пустое состояние, загрузка, ошибка 8  (32)
   *   главная кнопка после блока ...... 4  (16)
   *   подвал страницы сверху .......... 6  (24)
   *
   * ⚠️ Есть места, где число сцеплено с чужим: высота ленты баннеров — с
   * превью и лимитом текста в CRM, распорка фильтров
   * повторяет их высоту, скелетон слотов — заголовок группы, высота нижнего
   * меню собрана из своих паддингов. Там правят ПАРОЙ и перемеряют; список —
   * в `web/static/css/portal/README-spacing.md`. */
  --bp-space-1: 4px;
  --bp-space-2: 8px;
  --bp-space-3: 12px;
  --bp-space-4: 16px;
  --bp-space-6: 24px;
  --bp-space-8: 32px;
}

/*
 * Portal runs on dark slate surfaces — locally remap --bp-green to the
 * brighter variant so existing var(--bp-green) usages render legibly on dark
 * backgrounds without per-component overrides. CRM/paper surfaces opt out
 * via body.theme-paper.
 */
body:not(.theme-paper) {
  --bp-green: var(--bp-green-on-dark);
  --bp-green-dark: var(--bp-green-on-dark-deep);
}