/**
 * Building Portfolio Pro — дизайн токени
 * ===========================================================================
 *
 * Три слоя, в този ред. Правилото е просто: компонент никога не посяга към
 * слой 1.
 *
 *   1. ПРИМИТИВИ   сурови стойности. Скали от цветове, отстояния, размери.
 *                  Нямат смисъл сами по себе си. --bpp-neutral-300 не казва
 *                  къде се използва.
 *
 *   2. СЕМАНТИЧНИ  роля вместо стойност. --bpp-surface, --bpp-ink-muted,
 *                  --bpp-status-available. Това ползват компонентите.
 *
 *   3. КОМПОНЕНТНИ само където компонент има нужда от собствена стойност,
 *                  която не следва от ролите.
 *
 * Смяната на цялата визия става чрез предефиниране на слой 2. Слой 1 остава
 * непокътнат, компонентите — също.
 *
 * Настройките на сградата (таблица bpp_buildings, колона design_overrides)
 * се вписват като inline стил върху обвиващия елемент и презаписват точно
 * семантичните токени за статус. Затова те са отделни променливи, а не
 * стойности, зашити в правилата за полигоните.
 */

:root {

	/* ===================================================================
	 * СЛОЙ 1 — ПРИМИТИВИ
	 * =================================================================== */

	/* Неутрална скала.
	 * Не е чисто сива: светлите тонове носят следа от топло, тъмните — от
	 * студено. Чисто сивото изглежда неизбрано, а интерфейс, който стои до
	 * архитектурни чертежи, печели от лека топлина в хартията. */
	--bpp-neutral-0:   #ffffff;
	--bpp-neutral-25:  #fafaf9;
	--bpp-neutral-50:  #f5f5f3;
	--bpp-neutral-100: #eaeae7;
	--bpp-neutral-200: #d9d9d5;
	--bpp-neutral-300: #bfbfba;
	--bpp-neutral-400: #9b9b96;
	/* Двете стъпала за приглушен текст. Стълбата ги има само защото
	 * --bpp-neutral-400 и --bpp-neutral-500 не стигат 4.5:1 върху повърхността
	 * си: 2.79 на бяло и 3.15 на тъмно. Приглушеното не значи нечетимо. */
	--bpp-neutral-350: #b4b4af;
	--bpp-neutral-450: #696963;
	--bpp-neutral-500: #797974;
	--bpp-neutral-600: #5d5d59;
	--bpp-neutral-700: #454542;
	--bpp-neutral-800: #2d2d2b;
	--bpp-neutral-900: #1b1b1a;

	/* Прозирни воали. Сурови стойности: ролята им се дава в слой 2. */
	--bpp-black-a55: rgb(0 0 0 / 55%);
	--bpp-black-a88: rgb(0 0 0 / 88%);
	--bpp-white-a20: rgb(255 255 255 / 20%);
	--bpp-white-a88: rgb(255 255 255 / 88%);

	/* Основен акцент — дълбоко синьо-зелено.
	 * Избрано, защото стои професионално до архитектурна визуализация, не се
	 * бие с фасадни рендери в топли тонове и се различава от синьото на
	 * WordPress админа, без да крещи. */
	--bpp-accent-50:  #e9f1f2;
	--bpp-accent-100: #c8dfe3;
	--bpp-accent-200: #9cc4cb;
	--bpp-accent-300: #6ba7b1;
	--bpp-accent-400: #3f838f;
	--bpp-accent-500: #1f5f6b;
	--bpp-accent-600: #185059;
	--bpp-accent-700: #123c44;

	/* Семафорни скали.
	 * Отделни от акцента. Смяната на фирмения цвят не бива да променя това
	 * кое се чете като „свободно“ и кое като „продадено“. */
	--bpp-green-50:  #eaf3ec;
	--bpp-green-300: #7bb389;
	--bpp-green-500: #3f7d4e;
	--bpp-green-700: #2c5a38;

	--bpp-amber-50:  #f8f0e2;
	--bpp-amber-300: #d9b271;
	--bpp-amber-500: #b8863b;
	--bpp-amber-700: #8a632a;

	--bpp-red-50:  #f8ecea;
	--bpp-red-300: #d99b91;
	--bpp-red-500: #b0503f;
	--bpp-red-700: #83392c;

	/* Отстояния. Стъпка 4px — съвпада с ритъма на WordPress админа. */
	--bpp-space-0:  0;
	--bpp-space-1:  4px;
	--bpp-space-2:  8px;
	--bpp-space-3:  12px;
	--bpp-space-4:  16px;
	--bpp-space-5:  20px;
	--bpp-space-6:  24px;
	--bpp-space-8:  32px;
	--bpp-space-10: 40px;
	--bpp-space-12: 48px;
	--bpp-space-16: 64px;

	/* Типографска скала.
	 * Основата е 13px — размерът на WordPress админа. Плъгинът не бива да
	 * изглежда като чуждо тяло вътре в него. */
	--bpp-text-xs:   11px;
	--bpp-text-sm:   12px;
	--bpp-text-base: 13px;
	--bpp-text-md:   14px;
	--bpp-text-lg:   16px;
	--bpp-text-xl:   20px;
	--bpp-text-2xl:  26px;
	--bpp-text-3xl:  32px;

	--bpp-leading-tight:  1.25;
	--bpp-leading-normal: 1.5;
	--bpp-leading-loose:  1.65;

	--bpp-weight-normal:   400;
	--bpp-weight-medium:   500;
	--bpp-weight-semibold: 600;
	--bpp-weight-bold:     700;

	--bpp-tracking-wide:  0.06em;
	/* Едрите заглавия се стягат: при 40 px нормалното разстояние изглежда
	 * разхлабено. Малкият текст не се пипа — там стягането вреди на четенето. */
	--bpp-tracking-tight: -0.02em;


	--bpp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--bpp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	/* Радиуси. Пестеливи — интерфейсът е технически, не игрив. */
	--bpp-radius-sm:   3px;
	--bpp-radius-md:   5px;
	--bpp-radius-lg:   8px;
	--bpp-radius-full: 999px;

	/* Сенки. Три нива, всяко с ясна роля: без сянка, повдигнато, изскачащо. */
	--bpp-shadow-none: none;
	--bpp-shadow-sm:   0 1px 2px rgba(27, 27, 26, 0.06);
	--bpp-shadow-md:   0 2px 6px rgba(27, 27, 26, 0.08),
	                   0 1px 2px rgba(27, 27, 26, 0.05);
	--bpp-shadow-lg:   0 8px 24px rgba(27, 27, 26, 0.12),
	                   0 2px 6px rgba(27, 27, 26, 0.06);

	/* Движение. */
	--bpp-duration-fast: 120ms;
	--bpp-duration-base: 200ms;
	--bpp-duration-slow: 320ms;
	--bpp-ease: cubic-bezier(0.4, 0, 0.2, 1);

	--bpp-z-dropdown: 100;
	--bpp-z-sticky:   200;
	--bpp-z-overlay:  900;
	--bpp-z-modal:    1000;
	--bpp-z-toast:    1100;


	/* ===================================================================
	 * СЛОЙ 2 — СЕМАНТИЧНИ
	 * Това ползват компонентите. Предефинирайте тук, за да смените визията.
	 * =================================================================== */

	/* Повърхности, от най-задна към най-предна. */
	--bpp-surface:        var(--bpp-neutral-0);
	--bpp-surface-page:   var(--bpp-neutral-50);
	--bpp-surface-sunk:   var(--bpp-neutral-100);
	--bpp-surface-raised: var(--bpp-neutral-0);
	--bpp-surface-hover:  var(--bpp-neutral-50);

	/* Текст. */
	--bpp-ink:         var(--bpp-neutral-900);
	--bpp-ink-muted:   var(--bpp-neutral-600);
	--bpp-ink-faint:   var(--bpp-neutral-450);
	--bpp-ink-inverse: var(--bpp-neutral-0);

	/* Ръбове. */
	--bpp-border:        var(--bpp-neutral-200);
	--bpp-border-soft:   var(--bpp-neutral-100);
	--bpp-border-strong: var(--bpp-neutral-300);

	/* Акцент. */
	--bpp-accent:       var(--bpp-accent-500);
	--bpp-accent-hover: var(--bpp-accent-600);
	--bpp-accent-soft:  var(--bpp-accent-50);
	--bpp-accent-ink:   var(--bpp-neutral-0);

	/* Фокус. Винаги видим — никога outline: none без заместител. */
	--bpp-focus-ring:   0 0 0 2px var(--bpp-surface), 0 0 0 4px var(--bpp-accent-400);
	--bpp-focus-offset: 2px;

	/* Съобщения. */
	--bpp-success:      var(--bpp-green-500);
	--bpp-success-soft: var(--bpp-green-50);
	--bpp-warning:      var(--bpp-amber-500);
	--bpp-warning-soft: var(--bpp-amber-50);
	--bpp-danger:       var(--bpp-red-500);
	--bpp-danger-soft:  var(--bpp-red-50);

	/* Статуси на имотите.
	 * Презаписват се от настройките на сградата. Държат се отделно от
	 * --bpp-success и подобните, защото „свободен“ не е „успех“ — това са
	 * две различни неща, които случайно са зелени. */
	--bpp-status-available: var(--bpp-green-500);
	--bpp-status-reserved:  var(--bpp-amber-500);
	--bpp-status-sold:      var(--bpp-neutral-400);
	--bpp-status-rented:    var(--bpp-neutral-400);

	/* Лента върху снимка — надписи и бутони, легнали върху изображение.
	 * Не се обръща в тъмна тема: фонът ѝ е самата снимка, а тя изглежда
	 * еднакво и в двете. */
	--bpp-scrim:        var(--bpp-black-a55);
	--bpp-scrim-strong: var(--bpp-black-a88);
	--bpp-scrim-ink:    var(--bpp-neutral-0);
	--bpp-scrim-hover:  var(--bpp-white-a20);

	/* Полигони върху схемите. */
	--bpp-polygon-fill-opacity:  0.32;
	--bpp-polygon-hover-opacity: 0.55;
	--bpp-polygon-stroke:        var(--bpp-neutral-0);
	--bpp-polygon-stroke-width:  1.5;
	--bpp-polygon-selected-width: 3;
}

/* Тъмна тема.
 * Предефинират се само семантичните токени. Нито един компонент не знае, че
 * съществува тъмна тема. */
/* =======================================================================
 * ПУБЛИЧНАТА ЧАСТ — своя типографска скала
 *
 * Основата на скалата горе е 13 px: това е размерът на WordPress админа и
 * плъгинът не бива да изглежда като чуждо тяло вътре в него. На публичен сайт
 * обаче същите 13 px четат като страница от 2012 г. — там основата е 16 px,
 * а заглавията растат с ширината на екрана.
 *
 * Затова скалата се предефинира само в корените на публичната част. Един и същ
 * компонент — картата на имот например — се рисува с едни и същи правила на
 * двете места и просто идва по-едър навън.
 *
 * clamp() вместо media queries: размерът върви плавно с ширината, вместо да
 * скача на определени прагове. Долната граница е за телефон, горната — за да
 * не стане плакат на широк монитор.
 * ===================================================================== */

.bpp-page,
.bpp-search,
.bpp-portfolio,
.bpp-quick,
.bpp-map,
.bpp-enquiry {
	--bpp-text-xs:   13px;
	--bpp-text-sm:   14px;
	--bpp-text-base: 16px;
	--bpp-text-md:   17px;
	--bpp-text-lg:   19px;
	--bpp-text-xl:   clamp(21px, 1.1rem + 0.5vw, 25px);
	--bpp-text-2xl:  clamp(25px, 1.3rem + 1.1vw, 34px);
	--bpp-text-3xl:  clamp(32px, 1.5rem + 3vw, 54px);

	--bpp-leading-tight:  1.14;
	--bpp-leading-normal: 1.55;
	--bpp-leading-loose:  1.7;

	/* Разположението. Една мярка за ширината на всички раздели: иначе
	 * краищата им се разминават с по няколко пиксела. Облечен в темата,
	 * плъгинът взима нейната ширина — виж Support\Appearance. */
	--bpp-content-max:   1272px;
	--bpp-gutter:        var(--bpp-space-6);
	--bpp-section-gap:   var(--bpp-space-16);
	--bpp-search-max:    1272px;
	--bpp-search-gutter: var(--bpp-space-6);

	/* Почеркът на заглавията: колко тежки са и дали иконка стои пред тях. */
	--bpp-heading-weight:    var(--bpp-weight-semibold);
	--bpp-heading-icon:      inline-block;
	--bpp-display-weight:    var(--bpp-weight-bold);
	--bpp-display-transform: none;
	--bpp-display-size:      var(--bpp-text-3xl);
	--bpp-display-leading:   var(--bpp-leading-tight);
	--bpp-display-tracking:  var(--bpp-tracking-tight);
	--bpp-eyebrow-size:      var(--bpp-text-sm);

	/* Текстът за четене — описанието на сградата и надписът над заглавието.
	 * Облечен в темата, е цветът на текста ѝ. */
	--bpp-ink-body: color-mix(in srgb, var(--bpp-ink-muted), var(--bpp-ink));

	/* Чертата вляво от заглавията — фирменият цвят, сложен пестеливо. Докато
	 * в „Дизайн“ няма цвят за нея, е без ширина и отстъп, а не просто
	 * прозрачна: иначе заглавията стоят навътре от текста под тях. */
	--bpp-mark:       transparent;
	--bpp-mark-width: 0px;
	--bpp-mark-gap:   0px;

	/* Фонът на страницата на сградата. Прозрачен — фонът е на темата —
	 * докато в „Дизайн“ не е избран собствен. */
	--bpp-page-bg: transparent;

	/* Горната лента и тъмната лента с числата. */
	--bpp-hero-bg:      var(--bpp-surface-page);
	--bpp-band-bg:      var(--bpp-neutral-800);
	--bpp-band-ink:     var(--bpp-neutral-0);
	--bpp-band-accent:  var(--bpp-green-300);
	/* Лентата — цяла ширина или бокс в ширината на съдържанието, като синия
	 * бокс под видеото на началната страница. Облеклото на темата избира бокса. */
	--bpp-band-outer:     var(--bpp-band-bg);
	--bpp-band-box:       transparent;
	--bpp-band-box-pad:   0px;
	--bpp-band-empty-pad: var(--bpp-space-10);

	/* Бутоните и картите. */
	--bpp-button-bg:         var(--bpp-accent);
	--bpp-button-ink:        var(--bpp-accent-ink);
	--bpp-button-hover-bg:   var(--bpp-accent-hover);
	--bpp-button-hover-ink:  var(--bpp-accent-ink);
	--bpp-button-ghost-edge: var(--bpp-border);
	--bpp-button-edge:       var(--bpp-button-bg);
	--bpp-card-body-bg:      var(--bpp-surface-raised);
	--bpp-card-media-bg:     var(--bpp-surface-sunk);
	--bpp-card-border:       var(--bpp-border);
	--bpp-card-shadow:       none;
	--bpp-card-radius:       var(--bpp-radius-lg);
	--bpp-card-hover-border: var(--bpp-border-strong);
	--bpp-card-hover-shadow: var(--bpp-shadow-md);
	--bpp-card-badge-bg:     var(--bpp-surface);
	--bpp-card-badge-shadow: var(--bpp-shadow-sm);
	--bpp-card-badge-radius: var(--bpp-radius-full);
	/* Квадратът със стрелка в ъгъла на снимката — един и същ на всяка карта,
	 * като квадратите около видеото на началната. */
	--bpp-card-go-bg:        var(--bpp-accent);
	--bpp-card-go-ink:       var(--bpp-accent-ink);
	--bpp-card-go-hover:     var(--bpp-accent-hover);
	--bpp-card-go-size:      48px;
	--bpp-card-go-arrow:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E");
	/* Контурът на по-големите бели плоскости — списъкът и отвореният имот. */
	--bpp-panel-border:      var(--bpp-border);
	--bpp-price-weight:      var(--bpp-weight-bold);
	--bpp-bcard-min:         280px;
	--bpp-grid-gap:          var(--bpp-space-6);

	/* Точките върху картата. Зелено е обектът, в който има какво да се купи;
	 * червено — построеният. Не са --bpp-success и --bpp-danger: реализираният
	 * обект не е грешка, а най-доброто, което фирмата има за показване. */
	--bpp-pin-current:   var(--bpp-green-500);
	--bpp-pin-completed: var(--bpp-red-500);
	--bpp-pin-edge:      var(--bpp-neutral-0);
	--bpp-pin-shadow:    var(--bpp-black-a55);

	/* Табелката с двата цвята, легнала върху плочките. Светла и в тъмна тема:
	 * фонът ѝ е самата карта, а тя изглежда еднакво и в двете. */
	--bpp-legend-bg:  var(--bpp-white-a88);
	--bpp-legend-ink: var(--bpp-neutral-700);

	/* Графичните елементи на темата — вертикалните линии и акцентните
	 * квадрати. Прозрачни, докато не са включени в настройките. */
	--bpp-frame-line: transparent;
	--bpp-band-line:  transparent;
	--bpp-deco:       transparent;

	font-size: var(--bpp-text-base);

	/* Теглото се задава изрично: този CSS живее в чужда тема, а тема с
	 * `body { font-weight: 300 }` изтънява и цените, и данните на имота. */
	font-weight: var(--bpp-weight-normal);
	line-height: var(--bpp-leading-normal);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-bpp-theme="light"]) {
		--bpp-surface:        var(--bpp-neutral-800);
		--bpp-surface-page:   var(--bpp-neutral-900);
		--bpp-surface-sunk:   var(--bpp-neutral-900);
		--bpp-surface-raised: var(--bpp-neutral-700);
		--bpp-surface-hover:  var(--bpp-neutral-700);

		--bpp-ink:         var(--bpp-neutral-50);
		--bpp-ink-muted:   var(--bpp-neutral-300);
		--bpp-ink-faint:   var(--bpp-neutral-350);
		--bpp-ink-inverse: var(--bpp-neutral-900);

		--bpp-border:        var(--bpp-neutral-700);
		--bpp-border-soft:   var(--bpp-neutral-800);
		--bpp-border-strong: var(--bpp-neutral-600);

		--bpp-accent:       var(--bpp-accent-300);
		--bpp-accent-hover: var(--bpp-accent-200);
		--bpp-accent-soft:  var(--bpp-accent-700);
		--bpp-accent-ink:   var(--bpp-neutral-900);

		--bpp-success:      var(--bpp-green-300);
		--bpp-success-soft: var(--bpp-green-700);
		--bpp-warning:      var(--bpp-amber-300);
		--bpp-warning-soft: var(--bpp-amber-700);
		--bpp-danger:       var(--bpp-red-300);
		--bpp-danger-soft:  var(--bpp-red-700);

		--bpp-status-available: var(--bpp-green-300);
		--bpp-status-reserved:  var(--bpp-amber-300);
		--bpp-status-sold:      var(--bpp-neutral-500);
		--bpp-status-rented:    var(--bpp-neutral-500);

		--bpp-polygon-stroke: var(--bpp-neutral-900);

		--bpp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--bpp-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
		--bpp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
	}
}

[data-bpp-theme="dark"] {
	--bpp-surface:        var(--bpp-neutral-800);
	--bpp-surface-page:   var(--bpp-neutral-900);
	--bpp-surface-sunk:   var(--bpp-neutral-900);
	--bpp-surface-raised: var(--bpp-neutral-700);
	--bpp-surface-hover:  var(--bpp-neutral-700);

	--bpp-ink:         var(--bpp-neutral-50);
	--bpp-ink-muted:   var(--bpp-neutral-300);
	--bpp-ink-faint:   var(--bpp-neutral-350);
	--bpp-ink-inverse: var(--bpp-neutral-900);

	--bpp-border:        var(--bpp-neutral-700);
	--bpp-border-soft:   var(--bpp-neutral-800);
	--bpp-border-strong: var(--bpp-neutral-600);

	--bpp-accent:       var(--bpp-accent-300);
	--bpp-accent-hover: var(--bpp-accent-200);
	--bpp-accent-soft:  var(--bpp-accent-700);
	--bpp-accent-ink:   var(--bpp-neutral-900);

	--bpp-status-available: var(--bpp-green-300);
	--bpp-status-reserved:  var(--bpp-amber-300);
	--bpp-status-sold:      var(--bpp-neutral-500);
	--bpp-status-rented:    var(--bpp-neutral-500);

	--bpp-polygon-stroke: var(--bpp-neutral-900);
}

/* Уважение към системната настройка за намалено движение. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--bpp-duration-fast: 0ms;
		--bpp-duration-base: 0ms;
		--bpp-duration-slow: 0ms;
	}
}

/* ---------------------------------------------------------------------------
 * Едно правило извън токените
 * ------------------------------------------------------------------------- */

/* `hidden` идва от браузъра като display:none, но всяко авторско правило с
 * display го бие. Заради това лентата за групови действия стоеше видима без
 * избран ред, а бутонът „премахни файла“ — при всеки празен избирач.
 *
 * Стои тук, защото и админът, и изгледът, и търсачката зареждат този файл,
 * а и трите местят видимост през елемента, не през класове. */
[hidden] { display: none !important; }