/* The call window in the Holonix look (WP-089, pilot 03.10.2026 17:04: «звонок переделай, пожалуйста, интерфейс»).
   Element Call keeps its layout and controls; this sheet, linked after its own, repaints the Compound design scale it
   draws with: the grey scale becomes Holonix greens in both views (dark: the door's deep pine #152d22, light: «хвоя»),
   the font is Onest, the hang-up is the Tolk coral, and a person sign replaces the letter in an avatar without a
   picture (pilot 02.10: no letters in circles). Tolk passes the view as Element Call's theme parameter. */
@font-face {
  font-family: "Onest";
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/onest-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/onest-latin-wght-normal.woff2") format("woff2");
}

/* the font: Element Call sets its own per platform on [data-element-call-root], so this must outrank it */
:root,
[data-element-call-root],
[data-element-call-root][data-platform] {
  --cpd-font-family-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

.cpd-theme-dark,
.cpd-theme-dark-hc {
  --cpd-color-theme-bg: #152d22 !important;
  --cpd-color-gray-100: #11241b !important;
  --cpd-color-gray-200: #132820 !important;
  --cpd-color-gray-300: #17311f !important;
  --cpd-color-gray-400: #1b3a2b !important;
  --cpd-color-gray-500: #224634 !important;
  --cpd-color-gray-600: #2d5341 !important;
  --cpd-color-gray-700: #3a6350 !important;
  --cpd-color-gray-800: #5a7e6c !important;
  --cpd-color-gray-900: #86a394 !important;
  --cpd-color-gray-1000: #a2b9ac !important;
  --cpd-color-gray-1100: #b6cbbd !important;
  --cpd-color-gray-1200: #cddcd2 !important;
  --cpd-color-gray-1300: #e0ebe3 !important;
  --cpd-color-gray-1400: #edf5ef !important;
  --cpd-color-bg-critical-primary: #d9573f !important;
  --cpd-color-bg-critical-hovered: #c94c35 !important;
  --holonix-ava-znak: #f2f7f3;
}

.cpd-theme-light,
.cpd-theme-light-hc {
  --cpd-color-theme-bg: #f4faf6 !important;
  --cpd-color-gray-100: #f4faf6 !important;
  --cpd-color-gray-200: #eef6f1 !important;
  --cpd-color-gray-300: #e6f0e9 !important;
  --cpd-color-gray-400: #dbe8df !important;
  --cpd-color-gray-500: #cfdfd4 !important;
  --cpd-color-gray-600: #bfd2c5 !important;
  --cpd-color-gray-700: #a5bdae !important;
  --cpd-color-gray-800: #7f9c8d !important;
  --cpd-color-gray-900: #5f7d6d !important;
  --cpd-color-gray-1000: #4f6e5c !important;
  --cpd-color-gray-1100: #3d5d4b !important;
  --cpd-color-gray-1200: #2c4c3a !important;
  --cpd-color-gray-1300: #1f3f2e !important;
  --cpd-color-gray-1400: #173d29 !important;
  --cpd-color-bg-critical-primary: #c4472f !important;
  --cpd-color-bg-critical-hovered: #b03e28 !important;
  --holonix-ava-znak: #f3fbf6;
}

body {
  background-color: var(--cpd-color-theme-bg) !important;
}

/* an avatar without a picture: the Tolk palette and a drawn person instead of a letter */
[class*="_avatar-imageless_"] {
  color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f7f3' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 55% !important;
}
[class*="_avatar-imageless_"][data-color="1"] { --cpd-avatar-bg: #2f6b4a !important; }
[class*="_avatar-imageless_"][data-color="2"] { --cpd-avatar-bg: #7a6236 !important; }
[class*="_avatar-imageless_"][data-color="3"] { --cpd-avatar-bg: #2f6b4a !important; }
[class*="_avatar-imageless_"][data-color="4"] { --cpd-avatar-bg: #3f4f7a !important; }
[class*="_avatar-imageless_"][data-color="5"] { --cpd-avatar-bg: #2c6461 !important; }
[class*="_avatar-imageless_"][data-color="6"] { --cpd-avatar-bg: #5a6a2c !important; }