/* ============================================================
   MatchBase — Design Tokens
   Telegram mini-app для нетворкинга IT-фаундеров клуба «Мартехи»
   Dark, warm, mobile-first (content ~400–430px)
   ------------------------------------------------------------
   FONT: Google released **Google Sans** under the SIL Open Font License
   on 2025-12-10. The brand's real variable files are now self-hosted
   from fonts/ below. Manrope stays as a CDN fallback during load.
   ============================================================ */

/* Manrope @import убран — блокирует CSSOM до ответа fonts.googleapis.com (риск флапа в RU);
   Google Sans локально + system stack покрывают fallback. */

/* --- Google Sans (Cyr+Lat subset, woff2) — 97КБ вместо 5МБ полной TTF.
       Italic Google Sans не подключаем — italic в UI не используется (editorial = P052). --- */
@font-face {
  font-family: 'Google Sans';
  src: url('fonts/GoogleSans-Cyr-Lat.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --- P052 italic — только для editorial-акцентов (Roman/Bold не подключаем — не нужны). --- */
@font-face { font-family:'P052'; src:url('fonts/P052/P052-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

/* --- Donpoligrafbum — рукописный «прописью» дисплей для брендовых заголовков экранов. --- */
@font-face { font-family:'Donpoligrafbum'; src:url('fonts/Donpoligrafbum-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  --mb-serif: 'P052', Georgia, 'Times New Roman', serif;
  /* fallback БЕЗ P052 — он в проекте только italic, попал бы как italic-серий в FOUT окне */
  --mb-script: 'Donpoligrafbum', Georgia, cursive, serif;
}

/* ============================================================
   COLOR SEMANTICS — три акцента несут смысл и постоянны в любой теме.
   Меняется только «холст»: молоко (light) ↔ тёплый чёрный (dark).
     #F8F4EE  «молоко»     — light: фон / dark: текст (один цвет, инверсия)
     #333333  «графит»     — light: текст / dark: ≈ поверхности
     #E0544A  🍉 арбуз      — основной акцент (действие, бренд)
     #FFC145  🏗 архитектура — редкий акцент (тех-коммуникации, прогресс, уровень)
     #9B51E0  🦄 единорог    — супер-редкий акцент (ИИ, премиум, инвайт)
     #4FB477  ✅ зелёный     — успех / живой мэтч / открытый контакт
   ------------------------------------------------------------
   Две темы:
     :root              = DARK  (как в shipped MVP — по умолчанию)
     [data-theme=light] = LIGHT (исходная задумка — молоко + графит)
   ============================================================ */

:root {
  /* ---------- BACKDROP & SURFACES (warm near-black greys) ---------- */
  --mb-canvas:    #161618;   /* app backdrop — warmest darkest */
  --mb-bg:        #2b2b2e;   /* app column / sheet background  */
  --mb-surface:   #36363a;   /* cards, rows, primary surface   */
  --mb-surface-2: #42424a;   /* chips, wells, raised controls  */

  /* ---------- INK (warm off-white, never pure #fff) ---------- */
  --mb-ink:    #F8F4EE;                    /* primary text       */
  --mb-muted:  rgba(248, 244, 238, 0.55);  /* secondary text     */
  --mb-faint:  rgba(248, 244, 238, 0.34);  /* tertiary / hints   */
  --mb-line:   rgba(248, 244, 238, 0.12);  /* hairline borders   */

  /* ---------- ACCENT + SEMANTICS ---------- */
  --mb-accent: #E0544A;   /* coral-red — primary action, brand, "почему мэтч" */
  --mb-warn:   #FFC145;   /* amber  — progress, level, AI-badge fill          */
  --mb-rare:   #cdff3a;   /* лайм — AI-подбор / премиум / инвайт (фиолет ушёл) */
  --mb-ok:     #4FB477;   /* green  — success, живой мэтч, открытый контакт    */
  --mb-live:   #4CC38A;   /* slightly brighter green for 🟢 live-match tag     */

  /* tinted fills (used on badges, pills, gradient blocks) */
  --mb-accent-tint: rgba(224, 84, 74, 0.14);
  --mb-warn-tint:   rgba(255, 193, 69, 0.16);
  --mb-rare-tint:   rgba(205, 255, 58, 0.14);
  --mb-ok-tint:     rgba(79, 180, 119, 0.18);

  /* ---------- DIAGONAL GRADIENTS (key emphasis blocks) ---------- */
  /* "почему мэтч" / reason — coral → purple */
  --mb-grad-reason:  linear-gradient(135deg, rgba(224,84,74,.18), rgba(155,81,224,.14));
  /* открытый контакт — green → coral */
  --mb-grad-contact: linear-gradient(135deg, rgba(79,180,119,.2), rgba(224,84,74,.16));
  /* avatars / MB mark — amber → coral (жёлто-красный) */
  --mb-grad-avatar:  linear-gradient(135deg, #FFC145, #E0544A);

  /* ---------- LEVEL METER — 2-color gradient picked by bracket ----------
     Заливка всегда из ДВУХ цветов (без середины), пара зависит от уровня:
       lvl ≤ 5    красный → красно-оранжевый
       6–9        красный → жёлтый
       10–12      жёлтый  → зелёный
       ≥ 13       зелёный → фиолетовый                                      */
  --mb-level-lo:  linear-gradient(90deg, #E0544A, #F2724E);
  --mb-level-mid: linear-gradient(90deg, #E0544A, #FFC145);
  --mb-level-hi:  linear-gradient(90deg, #FFC145, #4FB477);
  --mb-level-top: linear-gradient(90deg, #4FB477, #9B51E0);

  /* ---------- RADII ---------- */
  --mb-r-card:   18px;   /* cards / gates / contact blocks      */
  --mb-r-inner:  16px;   /* match rows, nested cards            */
  --mb-r-block:  14px;   /* buttons, reason block, invite pill  */
  --mb-r-well:   12px;   /* chains, openers, inputs, chips wells */
  --mb-r-pill:   999px;  /* chips, badges, avatars, round btns  */

  /* ---------- SHADOWS / ELEVATION ---------- */
  --mb-shadow-card:  0 8px 30px rgba(0,0,0,.28);   /* resting card     */
  --mb-shadow-nav:   0 10px 30px rgba(0,0,0,.38);  /* glass bottom nav */
  --mb-shadow-round: 0 6px 20px rgba(0,0,0,.35);   /* swipe FAB        */
  --mb-shadow-push:  0 10px 34px rgba(0,0,0,.45);  /* bot push toast   */
  --mb-shadow-sheet: 0 -10px 40px rgba(0,0,0,.5);  /* bottom sheet     */

  /* ---------- GLASS (bottom nav / sticky top) ---------- */
  --mb-glass-bg:     rgba(54, 54, 58, 0.6);
  --mb-glass-blur:   blur(20px) saturate(150%);
  --mb-glass-border: rgba(255, 255, 255, 0.08);

  /* ---------- SPACING (the app lives on a tight 2/4 rhythm) ---------- */
  --mb-space-1: 4px;
  --mb-space-2: 6px;
  --mb-space-3: 8px;
  --mb-space-4: 10px;
  --mb-space-5: 12px;
  --mb-space-6: 14px;
  --mb-space-7: 16px;
  --mb-space-8: 18px;

  /* ---------- TYPE ---------- */
  --mb-font: 'Montserrat','Google Sans',-apple-system,'Inter','Segoe UI',Roboto,sans-serif;
  --mb-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --mb-lh: 1.45;
}

/* ============================================================
   LIGHT THEME — исходная задумка: молоко #F8F4EE + графит #333333.
   Те же три акцента. Применяется на <html data-theme="light">
   или через класс .mb-light на контейнере.
   ============================================================ */
:root[data-theme="light"], .mb-light {
  --mb-canvas:    #f2efe6;   /* крем — лист приложения (дизайн-система клуба) */
  --mb-bg:        #ffffff;   /* чистые карточные поверхности  */
  --mb-surface:   #fbfbf7;   /* карточка = оттенок бумаги, не контур */
  --mb-surface-2: #f7f7f1;   /* чипы / wells */

  --mb-ink:    #0b0b0c;                  /* чёрный — основной текст */
  --mb-muted:  #45443d;
  --mb-faint:  #6f6e66;
  --mb-line:   #e8e6da;                  /* волосяная линия вместо рамки */

  /* АКЦЕНТ-ТЕКСТ чернильный: лайм на светлом текстом не читается (канон Кости 07.09.2026 —
     кислота работает ЗАЛИВКОЙ крупных площадей, поверх неё чёрный). Заливка — в --mb-fill. */
  --mb-accent: #0b0b0c;
  --mb-fill:      #cdff3a;   /* лайм — заливка кнопок, активных чипов, полос */
  --mb-fill-ink:  #0b0b0c;   /* текст поверх лайма */
  /* фиолет и янтарь — чужие фирменные цвета. В клубе акцент один: лайм заливкой,
     поверх него чернила. Смыслы (редкость, прогресс) даёт подложка, а не свой цвет. */
  --mb-warn:   #0b0b0c;
  --mb-rare:   #0b0b0c;
  --mb-ok:     #2F7048;
  --mb-live:   #2F7048;

  --mb-accent-tint: rgba(205, 255, 58, 0.22);   /* лаймовая подложка */
  --mb-warn-tint:   rgba(205, 255, 58, 0.20);
  --mb-rare-tint:   rgba(205, 255, 58, 0.18);
  --mb-ok-tint:     rgba(79, 180, 119, 0.16);

  /* теней в дизайн-системе нет — карточка держится оттенком бумаги и волосяной линией */
  --mb-shadow-card:  none;
  --mb-shadow-nav:   none;
  --mb-shadow-round: none;
  --mb-shadow-push:  none;
  --mb-shadow-sheet: none;

  /* стекло на светлом */
  --mb-glass-bg:     rgba(255, 255, 255, 0.7);
  --mb-glass-border: rgba(11, 11, 12, 0.08);
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Body is small geometric sans (15px). Headings the brand
   likes are LARGE & UPPERCASE with tight tracking.
   ============================================================ */

.mb-base {
  font-family: var(--mb-font);
  color: var(--mb-ink);
  font-size: 15px;
  line-height: var(--mb-lh);
  -webkit-font-smoothing: antialiased;
}

/* Display — big UPPERCASE brand headline in Donpoligrafbum («прописью»).
   Hero / welcome / covers. UI titles use .mb-h1/.mb-h2 (Google Sans). */
.mb-display {
  font-family: var(--mb-script);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--mb-ink);
}

/* Display alt — editorial serif (P052) for elegant headlines */
.mb-display-serif {
  font-family: var(--mb-serif);
  font-weight: 700;
  font-style: italic;
  font-size: 38px;
  line-height: 1.08;
  color: var(--mb-ink);
}

/* H1 — screen title in top bar */
.mb-h1 {
  font-family: var(--mb-font);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--mb-ink);
}

/* H2 — welcome / gate headline */
.mb-h2 {
  font-family: var(--mb-font);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--mb-ink);
}

/* Card title — product / project name */
.mb-title {
  font-family: var(--mb-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: var(--mb-ink);
}

/* Body — default running text */
.mb-body {
  font-family: var(--mb-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(248, 244, 238, 0.9);
}

/* Caption — secondary descriptive text */
.mb-caption {
  font-family: var(--mb-font);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mb-muted);
}

/* Sub — top-bar subtitle / fine print */
.mb-sub {
  font-family: var(--mb-font);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mb-muted);
}

/* Eyebrow / label — UPPERCASE accent micro-label above blocks */
.mb-eyebrow {
  font-family: var(--mb-font);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mb-accent);
}

/* Badge / chip text */
.mb-meta {
  font-family: var(--mb-font);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: var(--mb-ink);
}