/* ==========================================================================
   קן התור (Ken HaTor) — brand tokens
   Источник цветов: пипетка со скриншотов сайта + PDF логотипов.
   Все новые блоки берут цвета, шрифты, радиусы ТОЛЬКО отсюда.
   ========================================================================== */

:root {
  /* ---- Корпоративная палитра (сайт) ---- */
  --kh-cream:        #FDF9F3;  /* фон страницы — никогда не чистый белый */
  --kh-cream-deep:   #F5F3F1;  /* подложки, плашки на кремовом */
  --kh-pattern-bird: #F1EEEA;  /* птицы в фоновом узоре */
  --kh-blue:         #405D97;  /* главный акцент: кнопки, стрелки, ссылки */
  --kh-blue-hover:   #34507F;
  --kh-blue-soft:    #B3C2DE;  /* неактивная стрелка, бордеры на кремовом */
  --kh-blue-mist:    #E5E7EC;  /* ≈32 % --kh-blue-soft на кремовом: лёгкие голубые плашки, карточки */
  --kh-bird-blue:    #91A9D5;  /* заливка знака в шапке */
  --kh-ink:          var(--color, #000000);  /* основной текст = --color сайта */
  --kh-ink-muted:    #5A5A5A;  /* подзаголовки, подписи */
  --kh-navy:         #243040;  /* «קן התור» в логотипах, тёмные секции */
  --kh-white:        #FFFFFF;

  /* ---- Проектные палитры (из логотипов) ----
     accent  = цвет названия проекта
     divider = цвет вертикальной черты | в логотипе, второй акцент
     dark    = фирменный тёмный фон проекта                         */
  --kh-lisin-accent:   #A794C0;  /* ליסין 15 — лаванда */
  --kh-lisin-divider:  #E6C28A;  /* золото */
  --kh-lisin-dark:     #261B2F;  /* баклажан */

  --kh-egoz-accent:    #00696E;  /* מעפילי אגוז 32 — петроль */
  --kh-egoz-divider:   #E3B0AE;  /* пудрово-розовый */
  --kh-egoz-dark:      #243040;  /* нейви */

  --kh-ficus-accent:   #025D8E;  /* פיקוס 21-31 — глубокий синий */
  --kh-ficus-divider:  #C2B5A5;  /* песок */
  --kh-ficus-dark:     #025D8E;

  /* Текущая тема блока (переопределяется через [data-project]) */
  --kh-accent:        var(--kh-blue);
  --kh-accent-hover:  var(--kh-blue-hover);
  --kh-accent-2:      var(--kh-bird-blue);
  --kh-surface-dark:  var(--kh-navy);

  /* ---- Типографика ----
     Шрифт сайта: NarkissBlock (Fontef). ВАЖНО: на сайте каждое начертание —
     ОТДЕЛЬНОЕ семейство ('NarkissBlock-Bold' и т.д.), а не font-weight.
     Поэтому жирность задаётся сменой семейства, font-weight всегда normal.
     Токены ссылаются на переменные сайта из root.scss (--font-family-*),
     чтобы на живом сайте брались ровно те же @font-face.
     Логотипы набраны FbMatador Narrow Heb — в вёрстке не используем.      */
  --kh-font-fallback: "Arial Hebrew", Arial, sans-serif;
  --kh-font-hairline: var(--font-family-hairline, "NarkissBlock-Hairline"), var(--kh-font-fallback);
  --kh-font-exlight:  var(--font-family-exlight,  "NarkissBlock-Extralight"), var(--kh-font-fallback);
  --kh-font-light:    var(--font-family-light,    "NarkissBlock-Light"), var(--kh-font-fallback);
  --kh-font-regular:  var(--font-family,          "NarkissBlock-Regular"), var(--kh-font-fallback);
  --kh-font-medium:   var(--font-family-medium,   "NarkissBlock-Medium"), var(--kh-font-fallback);
  --kh-font-semibold: var(--font-family-semibold, "NarkissBlock-Semibold"), var(--kh-font-fallback);
  --kh-font-bold:     var(--font-family-bold,     "NarkissBlock-Bold"), var(--kh-font-fallback);
  --kh-font-heavy:    var(--font-family-heavy,    "NarkissBlock-Heavy"), var(--kh-font-fallback);
  --kh-font-black:    var(--font-family-black,    "NarkissBlock-Black"), var(--kh-font-fallback);
  --kh-font-body:     var(--kh-font-regular);
  --kh-font-heading:  var(--kh-font-bold);

  --kh-fs-hero:  clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --kh-fs-h1:    clamp(2rem, 1.5rem + 2vw, 3rem);
  --kh-fs-h2:    clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);  /* «BLUE CLIFF» */
  --kh-fs-h3:    1.375rem;
  --kh-fs-lead:  clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);  /* абзац в блоке Blue Cliff */
  --kh-fs-body:  1.125rem;
  --kh-fs-small: 0.9375rem;

  --kh-lh-tight: 1.1;
  --kh-lh-head:  1.2;
  --kh-lh-body:  1.55;
  --kh-measure:  38rem;  /* макс. ширина текстовой колонки */

  /* ---- Отступы, сетка ---- */
  --kh-space-1: 0.5rem;
  --kh-space-2: 1rem;
  --kh-space-3: 1.5rem;
  --kh-space-4: 2rem;
  --kh-space-5: 3rem;
  --kh-space-6: 4.5rem;
  --kh-space-7: 7rem;
  --kh-section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --kh-container: 1440px;
  --kh-gutter: clamp(1.25rem, 0.5rem + 4vw, 7.5rem);  /* на сайте ~120px на десктопе */

  /* ---- Формы ---- */
  --kh-radius-sm:   8px;    /* кнопка «יותר» */
  --kh-radius-md:   14px;
  --kh-radius-lg:   24px;   /* большие фото в слайдере */
  --kh-radius-pill: 999px;  /* круглые стрелки */
  --kh-shadow-soft: 0 18px 40px -24px rgba(36, 48, 64, 0.35);
  --kh-shadow-plinth: 0 10px 0 0 #B7C6E3;  /* «постамент» как у 3D-иконок */

  --kh-ease: cubic-bezier(.22, .61, .36, 1);
  --kh-dur:  260ms;
}

/* ---- Тема «Энергорейтинг A / зелёное строительство» ----
   Тематическое исключение из палитры: только для страниц и блоков про
   энергоэффективность (источник: reference/pages/energy-a-rating.pdf).
   Основа страницы остаётся кремовой, синий — для кнопок.                */
:root {
  --kh-green:        #348C3A;  /* крупные заголовки (≥24px): 4.04 на кремовом */
  --kh-green-deep:   #2A722F;  /* текст/иконки и фон бейджа: белый на нём 5.92 */
  --kh-green-mist:   #DAE9CC;  /* «стеклянные» карточки */
  --kh-green-ink:    #222C3B;  /* текст на зелёных подложках (= navy логотипа) */
  --kh-energy-app:   #2A8B3F;  /* A+ */
  --kh-energy-a:     #4FB537;
  --kh-energy-b:     #9AD420;
  --kh-energy-c:     #EBE212;
  --kh-energy-d:     #EDA410;
  --kh-energy-e:     #E1571D;
  --kh-energy-f:     #D22027;
  --kh-energy-house: #14471B;  /* контур домика у шкалы */
}
[data-theme="energy"] { --kh-accent-2: var(--kh-green); }

/* ---- Темы проектов ---- */
[data-project="lisin"] { --kh-accent: var(--kh-lisin-accent); --kh-accent-hover: #8F7AAD; --kh-accent-2: var(--kh-lisin-divider); --kh-surface-dark: var(--kh-lisin-dark); }
[data-project="egoz"]  { --kh-accent: var(--kh-egoz-accent);  --kh-accent-hover: #005357; --kh-accent-2: var(--kh-egoz-divider);  --kh-surface-dark: var(--kh-egoz-dark); }
[data-project="ficus"] { --kh-accent: var(--kh-ficus-accent); --kh-accent-hover: #014A72; --kh-accent-2: var(--kh-ficus-divider); --kh-surface-dark: var(--kh-ficus-dark); }
/* Lisin-лаванда на кремовом не проходит AA для мелкого текста: для кнопок с белым текстом используем тёмный фон */
[data-project="lisin"] .kh-btn { background: var(--kh-lisin-dark); }
[data-project="lisin"] .kh-btn:hover { background: #3A2B47; }

/* ==========================================================================
   Базовые утилиты
   ========================================================================== */

.kh-section {
  position: relative;
  padding-block: var(--kh-section-y);
  padding-inline: var(--kh-gutter);
  background: var(--kh-cream);
  color: var(--kh-ink);
  font-family: var(--kh-font-body);
  direction: rtl;
  isolation: isolate;
  font-weight: normal;
  font-synthesis: none; /* не даём браузеру рисовать «фальшивый» жирный */
}
.kh-section :where(h1, h2, h3, h4, strong, b, th, dt) { font-weight: normal; }
.kh-container { max-width: var(--kh-container); margin-inline: auto; }

/* Фоновый узор из птиц — фирменная фактура сайта */
.kh-pattern::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("../assets/bird-pattern-tile.svg");
  background-size: 420px 420px;
  pointer-events: none;
}
.kh-pattern--fade::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.kh-title   { font-family: var(--kh-font-heading); font-size: var(--kh-fs-h2); line-height: var(--kh-lh-head); margin: 0; }
.kh-lead    { font-size: var(--kh-fs-lead); line-height: 1.35; max-width: var(--kh-measure); margin: 0; }
.kh-muted   { color: var(--kh-ink-muted); }

/* Кнопка — как «יותר» на сайте: плотная синяя плашка, небольшой радиус */
.kh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.6em;
  background: var(--kh-accent); color: var(--kh-white);
  font-family: var(--kh-font-bold); font-size: 1.0625rem; line-height: 1;
  border: 0; border-radius: var(--kh-radius-sm);
  text-decoration: none; cursor: pointer;
  transition: background var(--kh-dur) var(--kh-ease);
}
.kh-btn:hover { background: var(--kh-accent-hover); }
.kh-btn--ghost { background: transparent; color: var(--kh-accent); box-shadow: inset 0 0 0 1.5px currentColor; }
.kh-btn--ghost:hover { background: color-mix(in srgb, var(--kh-accent) 8%, transparent); }

/* Круглые стрелки слайдера. В RTL «следующий» = стрелка влево. */
.kh-arrow {
  inline-size: 54px; block-size: 54px; border-radius: var(--kh-radius-pill);
  display: inline-grid; place-items: center;
  background: var(--kh-accent); color: var(--kh-white); border: 0; cursor: pointer;
}
.kh-arrow[disabled] { background: var(--kh-blue-soft); cursor: default; }

/* Знак-птица, заливка берёт currentColor */
.kh-bird { inline-size: 56px; block-size: auto; color: var(--kh-bird-blue); }

:where(.kh-section) :focus-visible { outline: 3px solid var(--kh-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .kh-section *, .kh-section *::before, .kh-section *::after { transition: none !important; animation: none !important; }
}