/* ============================================================================
   Поколение CRM — Design Tokens
   "Trusted Banking" — серьёзный кабинет, в котором двигаются деньги клиентов.
   ----------------------------------------------------------------------------
   Fonts: IBM Plex Sans (UI) + IBM Plex Mono (суммы, числа, ID).
   Both are loaded from Google Fonts below. IBM Plex was chosen to move off the
   "default AI-site" Inter look — engineered, fintech-grade, with strong Cyrillic.
   If you need fully-offline
   assets, drop the .ttf/.woff2 into ./fonts/ and swap the @import for @font-face.
   ============================================================================ */

/* Шрифты подключаются ЛОКАЛЬНО (fonts.css рядом): у владельца браузер не достучался до
   Google Fonts, и интерфейс падал на системный шрифт. См. apps/crm/web/fonts/. */

:root {
  /* ---------- ФОН И ПОВЕРХНОСТИ ------------------------------------------ */
  --bg:            #FAFAF8;  /* основной фон страницы — тёплый off-white */
  --bg-soft:       #F1EFE9;  /* секции, hover на строках таблицы */
  --bg-card:       #FFFFFF;  /* карточки, модалки */

  /* ---------- ГРАНИЦЫ И РАЗДЕЛИТЕЛИ -------------------------------------- */
  --border:        #E7E3DB;  /* стандартные границы карточек и input'ов */
  --border-strong: #D5D0C6;  /* hover, focus неактивный, разделители таблицы */

  /* ---------- ТЕКСТ ------------------------------------------------------ */
  --text:           #1C2233; /* основной — gray-900, почти чёрный */
  --text-secondary: #434B5E; /* подписи, labels формы */
  --text-dim:       #7E8595; /* meta, плейсхолдеры, временные метки */

  /* ---------- БРЕНД (navy) — надёжность ---------------------------------- */
  --brand:          #1E3A8A; /* navy-800 — primary CTA, активная навигация */
  --brand-soft:     #E2E9F5; /* blue-100 — фон для бейджей и pills */
  --brand-ink:      #234381; /* blue-700 — текст на brand-soft */
  --brand-hover:    #1A3377; /* navy чуть темнее — hover на primary CTA */
  --brand-press:    #152A60; /* navy ещё темнее — active/press */

  /* ---------- ЗЕЛЁНЫЙ — деньги, оплачено, рост --------------------------- */
  --green:          #2F6B4F; /* green-700 — лесной, насыщенный */
  --green-bg:       #E5EFE9; /* green-100 — фон пилюль "Оплачено" */
  --green-ink:      #214E39; /* green-800 — текст на green-bg */

  /* ---------- ЯНТАРНЫЙ — внимание, ожидание ------------------------------ */
  --amber:          #9A7B33; /* yellow-600 — приглушённое золото */
  --amber-bg:       #F3ECD9; /* yellow-100 */
  --amber-ink:      #6A5320; /* yellow-900 */

  /* ---------- КРАСНЫЙ — просрочка, ошибки, отмены ------------------------ */
  --coral:          #A8443B; /* red-700 — глубокая бордо, не «весёлая» */
  --coral-bg:       #F5E4E0; /* red-100 */
  --coral-ink:      #79302A; /* red-800 */

  /* ---------- ЗОЛОТО — VIP, премиум-сегмент ------------------------------ */
  --gold:           #93702F; /* amber-700 — медное золото */
  --gold-soft:      #EEE5CD; /* amber-100 */
  --gold-ink:       #5E461E; /* amber-800 — текст на gold-soft */

  /* ====================================================================== */
  /*  ТИПОГРАФИКА                                                            */
  /* ====================================================================== */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Размерная шкала (px) */
  --fs-h1:    32px;   --lh-h1: 1.15;  --ls-h1: -0.6px;   --fw-h1: 700;
  --fs-h2:    22px;   --lh-h2: 1.25;  --ls-h2: -0.3px;   --fw-h2: 700;
  --fs-h3:    16px;   --lh-h3: 1.35;  --ls-h3: 0;        --fw-h3: 700;
  --fs-over:  13px;   --lh-over:1.2;  --ls-over:0.06em;  --fw-over:700;  /* overline / h4 */
  --fs-body:  15px;   --lh-body:1.55; --ls-body:0;       --fw-body:400;
  --fs-small: 12px;   --lh-small:1.4; --ls-small:0;      --fw-small:500;
  --fs-money: 14px;   --lh-money:1.4; --ls-money:0;      --fw-money:600;  /* IBM Plex Mono */
  --fs-stat:  28px;   --lh-stat:1.1;  --ls-stat:-0.5px;  --fw-stat:700;

  /* ====================================================================== */
  /*  РАДИУСЫ — сдержанные, "банковские". Без скруглений-пузырей.            */
  /* ====================================================================== */
  --radius-xs:  4px;   /* бейджи, теги, мелкие чипы */
  --radius-sm:  6px;   /* кнопки, input'ы */
  --radius-md:  8px;   /* карточки, модалки */
  --radius-lg:  12px;  /* крупные панели, дашборд-блоки */
  --radius-pill: 999px;/* пилюли статусов, аватары */

  /* ====================================================================== */
  /*  ТЕНИ — мягкие, низкоконтрастные. Свет холодного navy, не чёрный.       */
  /* ====================================================================== */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.06), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg: 0 12px 32px rgba(30, 58, 138, 0.10), 0 4px 8px rgba(17, 24, 39, 0.05);
  --shadow-focus: 0 0 0 3px rgba(30, 58, 138, 0.16); /* focus-ring navy */

  /* ====================================================================== */
  /*  СПЕЙСИНГ — шаг 4px.                                                    */
  /* ====================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Переходы — быстрые, деловые. Без bounce. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
}

/* ============================================================================
   СЕМАНТИЧЕСКИЕ КЛАССЫ — готовые типографические стили.
   ============================================================================ */
.ds-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1); font-weight: var(--fw-h1);
  line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
  color: var(--text); margin: 0;
}
.ds-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2); font-weight: var(--fw-h2);
  line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  color: var(--text); margin: 0;
}
.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3); font-weight: var(--fw-h3);
  line-height: var(--lh-h3); color: var(--text); margin: 0;
}
.ds-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-over); font-weight: var(--fw-over);
  line-height: var(--lh-over); letter-spacing: var(--ls-over);
  text-transform: uppercase; color: var(--text-dim); margin: 0;
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body); font-weight: var(--fw-body);
  line-height: var(--lh-body); color: var(--text);
}
.ds-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small); font-weight: var(--fw-small);
  line-height: var(--lh-small); color: var(--text-dim);
}
.ds-money {
  font-family: var(--font-mono);
  font-size: var(--fs-money); font-weight: var(--fw-money);
  font-variant-numeric: tabular-nums; color: var(--text);
}
.ds-stat {
  font-family: var(--font-sans);
  font-size: var(--fs-stat); font-weight: var(--fw-stat);
  line-height: var(--lh-stat); letter-spacing: var(--ls-stat);
  color: var(--text); font-variant-numeric: tabular-nums;
}