/* SMStats — «Бордо и графит». Решение владельца 2026-08-10, см. PRODUCT.md.
   Один набор имён на оба бренда; значения свои. Цвета в компонентах не хардкодим. */

:root {
  color-scheme: light;          /* тёмной темы у лендинга нет — решено один раз */

  /* ── Поверхности ─────────────────────────────────────────── */
  --bg:            #F6F5F6;
  --surface:       #FFFFFF;
  --surface-2:     #FBFAFA;     /* боковое меню, шапки таблиц */
  --surface-inset: #F1EEEF;     /* вдавленные плашки, чипы */
  --deep:          #241A1D;     /* графит: тёмные полосы и плитки */

  /* ── Текст ───────────────────────────────────────────────── */
  --text:    #1C1619;
  --text-2:  #5B5257;
  --text-3:  #726A6E;          /* 4.8:1 на белом — светлее нельзя, мелкий текст */
  --on-brand: #FFFFFF;
  --on-deep:  #FFFFFF;
  --on-deep-2: rgba(255,255,255,.72);
  --on-deep-3: rgba(255,255,255,.55);

  /* ── Фирменный цвет и состояния ──────────────────────────── */
  --brand:        #9B2242;
  --brand-hover:  #851C39;
  --brand-active: #75162F;
  --brand-soft:   #FAE9ED;
  --brand-ink:    #75162F;      /* бордо как текст на светлом: контраст 8.4:1 */
  --brand-lift:   #F4A6B8;      /* бордо, читаемое на графите */

  /* ── Семантика ───────────────────────────────────────────── */
  /* ⚠️ Фирменный цвет сам красный, поэтому убыток красным не показать —
     минусы уходят в оранжевый. Правило действует на всех графиках и таблицах. */
  --pos:      #2E7D5B;
  --pos-soft: #E6F2EC;
  --neg:      #D9722A;
  --neg-soft: #FBEEE2;
  --warn:     #A8760A;

  /* ── Границы ─────────────────────────────────────────────── */
  --line:   #E7E3E5;
  --line-2: #F1EEEF;
  --line-deep: rgba(255,255,255,.14);

  /* ── Радиусы ─────────────────────────────────────────────── */
  --r-sm: 7px;
  --r:    9px;
  --r-lg: 13px;
  --r-xl: 18px;

  /* ── Тени: со смещением и мягким размытием, без цветных ореолов ── */
  --shadow-1: 0 2px 6px -3px rgba(28,22,25,.10);
  --shadow-2: 0 8px 20px -10px rgba(28,22,25,.22);
  --shadow-3: 0 36px 70px -34px rgba(28,22,25,.34), 0 3px 12px -5px rgba(28,22,25,.10);
  --shadow-btn: 0 4px 10px -5px rgba(28,22,25,.40);

  /* ── Типографика ─────────────────────────────────────────── */
  --font-sans: 'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:  var(--font-sans);   /* табличные цифры берём из того же семейства */

  --fs-display: clamp(34px, 5.2vw, 62px);
  --fs-h1:      clamp(30px, 4.2vw, 46px);
  --fs-h2:      clamp(24px, 3vw, 34px);
  --fs-h3:      20px;
  --fs-lead:    clamp(16px, 1.4vw, 18px);
  --fs-body:    15px;
  --fs-sm:      13px;
  --fs-xs:      11.5px;

  --lh-tight: 1.05;
  --lh-head:  1.2;
  --lh-body:  1.55;
  --lh-lead:  1.6;

  --tr-display: -.045em;   /* трекинг крупного набора */
  --tr-head:    -.03em;
  --tr-num:     -.02em;
  --tr-label:   .08em;     /* мелкие подписи в капсе */


  /* ── Компоновка первого экрана ─────────────────────────────
     Композиция задаётся токенами, а не селектором по имени бренда: имя бренда
     в общем CSS деплой заменил бы на второй бренд, и оба селектора совпали бы.
     Здесь: текст слева, окно приложения справа с выходом за правый край. */
  --hero-cols: minmax(0, 1fr) minmax(0, 1.08fr);
  --hero-text-align: left;
  --hero-copy-mx: 0;
  --hero-acts-just: flex-start;
  --hero-band: transparent;
  --hero-band-glow: none;
  --hero-halo: radial-gradient(46% 52% at 72% 42%, rgba(155,34,66,.20), transparent 70%);
  --band-glow: radial-gradient(64% 120% at 78% 0%, rgba(155,34,66,.55), transparent 62%);
  --hero-band-pb: 0px;
  --hero-stage-pull: 0px;
  --hero-stage-mr: min(calc(var(--gutter) * -1), calc((var(--container) - 100vw) / 2 - 6vw));
  --hero-win-radius: var(--r-lg) 0 0 var(--r-lg);

  /* Свечений прежнего мира у этого бренда нет — блоки остаются пустыми. */
  --glow-opacity: 0;

  /* Мокапы кабинета: на светлой теме островок совпадает с обычными поверхностями. */
  --light-bg: var(--bg);
  --light-surface: var(--surface);
  --light-ink: var(--text);
  --light-muted: var(--text-3);
  --light-border: var(--line);

  /* ── Раскладка ───────────────────────────────────────────── */
  --container: 1180px;
  --gutter: clamp(18px, 4vw, 40px);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
}