/* =============================================================
   EveloCRM Brand System — CSS only (v3.2 final)
   Защищено от всех вариантов форматирования шаблонов.
   ============================================================= */

:root {
  --evelo-green:        #10B981;
  --evelo-green-dark:   #059669;
  --evelo-green-hover:  #0EA371;
  --evelo-bg-dark:      #0A0E1A;
  --evelo-text-light:   #FFFFFF;
  --evelo-text-dark:    #0F1422;
  --evelo-text-muted:   #94A3B8;
}

/* ---------- Знак ---------- */
.evelo-mark {
  display: inline-block;
  width: 1em;
  aspect-ratio: 205 / 162;
  background-color: var(--evelo-green);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 162'><path d='M 11 124 L 117.8 11 L 96.2 150.9 L 163.5 86.8 L 194 86.4' fill='none' stroke='black' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 162'><path d='M 11 124 L 117.8 11 L 96.2 150.9 L 163.5 86.8 L 194 86.4' fill='none' stroke='black' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

.evelo-mark--bold {
  aspect-ratio: 221 / 178;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 221 178'><path d='M 11 124 L 117.8 11 L 96.2 150.9 L 163.5 86.8 L 194 86.4' fill='none' stroke='black' stroke-width='34' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 221 178'><path d='M 11 124 L 117.8 11 L 96.2 150.9 L 163.5 86.8 L 194 86.4' fill='none' stroke='black' stroke-width='34' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---------- Горизонтальный логотип ----------
   КЛЮЧЕВОЕ: используется единый <span class="evelo-logo__text">,
   внутри слова — обычный текст. Никаких <span>/<span> рядом,
   значит автоформаттер не может вставить пробел. */

.evelo-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--evelo-text-light);
}

.evelo-logo .evelo-mark {
  width: 1.5em;
  background-color: var(--evelo-green);
}

/* Единый span — никаких inline-соседей, никаких пробелов */
.evelo-logo__text {
  display: inline-block;
  white-space: nowrap;
}

/* CRM-часть через ::after (псевдоэлемент, контент задан в CSS) */
.evelo-logo__text::after {
  content: "CRM";
  color: var(--evelo-green);
}

/* Светлая тема */
.evelo-logo--light                       { color: var(--evelo-text-dark); }
.evelo-logo--light .evelo-mark           { background-color: var(--evelo-green-dark); }
.evelo-logo--light .evelo-logo__text::after { color: var(--evelo-green-dark); }

/* Моно */
.evelo-logo--mono                        { color: currentColor; }
.evelo-logo--mono .evelo-mark            { background-color: currentColor; }
.evelo-logo--mono .evelo-logo__text::after { color: inherit; }

/* Размеры */
.evelo-logo--sm { font-size: 16px; }
.evelo-logo--md { font-size: 22px; }
.evelo-logo--lg { font-size: 32px; }
.evelo-logo--xl { font-size: 48px; }

.evelo-logo--mark-only > .evelo-logo__text { display: none; }

/* ---------- Squircle-плашка (favicon-style) ---------- */
.evelo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--evelo-green);
  border-radius: 24%;
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.evelo-badge .evelo-mark {
  width: 62%;
  background-color: var(--evelo-text-light);
}

.evelo-badge--xs  { width: 16px;  height: 16px;  border-radius: 22%; }
.evelo-badge--xs .evelo-mark { width: 72%; }
.evelo-badge--sm  { width: 24px;  height: 24px; }
.evelo-badge--sm .evelo-mark { width: 68%; }
.evelo-badge--md  { width: 40px;  height: 40px; }
.evelo-badge--lg  { width: 64px;  height: 64px; }
.evelo-badge--xl  { width: 96px;  height: 96px; }
.evelo-badge--2xl { width: 144px; height: 144px; }

.evelo-badge--dark { background: var(--evelo-bg-dark); }
.evelo-badge--dark .evelo-mark { background-color: var(--evelo-green); }

/* Hover */
.evelo-logo:hover .evelo-mark { background-color: var(--evelo-green-hover); }
.evelo-logo:hover .evelo-logo__text::after { color: var(--evelo-green-hover); }