/* Yana Berg — дизайн-токены.
 * Единый источник цветов, шрифтов и анимаций для всех собственных блоков темы.
 * Визуальная шпаргалка: design-system.html в корне темы.
 */

/* Акцентный тонкий курсив для номеров разделов — Cormorant Garamond Light Italic,
 * локальная копия (Google Fonts, OFL). */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-italic-300-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Марсала — фирменный акцент (чуть темнее Pantone 18-1438). */
	--yb-marsala: #843f3f;
	--yb-marsala-light: #a45c58;
	--yb-marsala-dark: #5c2828;
	/* Оттенок для текста и тонких линий на тёмном фоне (контраст ≥ 4.5:1 к --yb-ink). */
	--yb-marsala-text: #c97f7a;
	--yb-marsala-glow: rgba(214, 110, 104, 0.7);

	/* Нейтральные. */
	--yb-ink: #1c2028;
	--yb-ink-raised: #262b35;
	/* Глубже ink: подложка схем и карт, «стекло» в тёмных диалогах. */
	--yb-ink-deep: #181b22;
	/* Плашка подвала — чуть светлее фона страницы. */
	--yb-ink-footer: #2a2e36;
	--yb-white: #ffffff;

	/* Текст на тёмном: контраст к --yb-ink в скобках (норма AA для мелкого текста — 4,5:1). */
	--yb-on-dark: rgba(255, 255, 255, 0.88);       /* основной текст абзацев (12,8:1) */
	--yb-on-dark-soft: rgba(255, 255, 255, 0.78);  /* подводки, второстепенный текст (10,4:1) */
	--yb-text-muted: rgba(255, 255, 255, 0.6);     /* подписи, описания (6,7:1) */
	--yb-text-subtle: rgba(255, 255, 255, 0.55);   /* мелкие надписи капсом, флаги (5,8:1); было 0,4 = 3,75:1 */

	/* Линии и подложки на тёмном. */
	--yb-line: rgba(255, 255, 255, 0.25);          /* заметная граница: поля, кнопки-контуры */
	--yb-line-mid: rgba(255, 255, 255, 0.16);
	--yb-line-soft: rgba(255, 255, 255, 0.1);      /* разделители сеток и списков */
	--yb-veil: rgba(255, 255, 255, 0.04);          /* лёгкая подложка карточки */
	--yb-veil-strong: rgba(255, 255, 255, 0.07);   /* подложка при наведении */

	/* Статусы. */
	--yb-success: #6fcf97;   /* «aberto agora» */
	--yb-error: #f0a8a3;     /* ошибки форм на тёмном */
	--yb-info: #6fa8dc;      /* остановки автобусов на схеме */

	/* Светлые секции («бумага») — чередуются с тёмными. На светлом фоне акцент — базовая марсала (6.6:1). */
	--yb-paper: #f4efea;
	--yb-paper-raised: #fbf8f5;
	--yb-ink-text: #1c2028;
	--yb-paper-muted: #5b5e66;
	--yb-paper-line: rgba(28, 32, 40, 0.14);

	/* Бежевый — тёплый нейтральный для тонкой графики. На тёмном — светлый (10:1), на бумаге — глубокий (3.2:1). */
	--yb-beige: #dcc8b2;
	--yb-beige-deep: #9e7f63;

	/* Градиент кнопок и акцентных заливок. */
	--yb-gradient-accent: radial-gradient(ellipse at 50% 30%, var(--yb-marsala-light) 0%, var(--yb-marsala) 55%, var(--yb-marsala-dark) 100%);

	/* Свечение акцентной кнопки при наведении: плотное, чуть ниже кнопки, с тонкой светлой кромкой. */
	--yb-shadow-glow: 0 14px 30px -12px var(--yb-marsala-glow), 0 0 0 1px color-mix(in srgb, var(--yb-marsala-text) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.16);

	/* Скругления. Правило: блоки и кнопки — с острыми углами; «пилюля» — фильтры, чипсы, переключатели;
	 * круг — иконки и аватары; 20px — только нижние выезжающие панели на телефоне. */
	--yb-radius-lg: 28px;
	--yb-radius-sheet: 20px;
	--yb-radius-pill: 999px;

	/* Типографика: шкала текста (Inter). Крупнее 32px — дисплейные размеры ниже. */
	--yb-fs-micro: 10px;   /* сноски о звонке, бейджи */
	--yb-fs-label: 11px;   /* надписи капсом, флаги, крошки */
	--yb-fs-xs: 12px;
	--yb-fs-sm: 13px;      /* кнопки, мета */
	--yb-fs-ui: 14px;
	--yb-fs-base: 15px;
	--yb-fs-md: 16px;
	--yb-fs-lg: 18px;      /* основной текст статей и глав */
	--yb-fs-xl: 22px;
	--yb-fs-2xl: 26px;
	--yb-fs-3xl: 32px;
	/* Дисплейные (Italiana / Cormorant): адаптивные. */
	--yb-fs-lead: clamp(21px, 2vw, 26px);        /* подводка под заголовком обложки */
	--yb-fs-h3: clamp(32px, 3.4vw, 46px);        /* заголовок внутри секции */
	--yb-fs-h2: clamp(40px, 4.6vw, 68px);        /* заголовок секции */

	/* Разрядка. */
	--yb-track-display: -0.02em;   /* крупные заголовки */
	--yb-track-button: 0.16em;     /* кнопки, ссылки-действия капсом */
	--yb-track-caps: 0.2em;        /* мелкие надписи капсом */

	/* Сетка. */
	--yb-container: 1280px;
	--yb-container-narrow: 1180px;
	--yb-gutter: 24px;
	--yb-gutter-sm: 20px;
	/* Брейкпоинты (в @media переменные не работают — это справочник):
	 * 480 · 700 · 900 · 1023 (меню Colibri → бургер) · 1100 · 1200 · 1280. */

	/* Слои. */
	--yb-z-popover: 30;    /* выпадающие меню, превью за курсором */
	--yb-z-sticky: 40;     /* липкие ленты рубрик и глав */
	--yb-z-nav: 80;        /* боковая навигация по разделам */
	--yb-z-dock: 90;       /* док «Marcar consulta» */
	--yb-z-header: 1000;   /* шапка, оглавление записи */
	--yb-z-consent: 9000;  /* плашка согласия на cookies */
	--yb-z-overlay: 9990;  /* кейс портфолио на весь экран */
	--yb-z-modal: 10000;   /* поиск, выезжающая форма */

	/* Тени и фокус. */
	--yb-shadow-pop: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
	--yb-shadow-modal: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
	--yb-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);

	/* Шрифты. */
	--yb-font-display: Italiana, Georgia, serif;
	--yb-font-body: Inter, system-ui, -apple-system, sans-serif;
	--yb-font-accent: "Cormorant Garamond", Georgia, serif;

	/* Анимация. */
	--yb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--yb-duration: 0.3s;
}

/* Сноска о стоимости звонка у номеров телефона (обязательна в Португалии).
 * Звёздочка у номера + мелкая строка под ним; цвет наследует приглушённый тон контекста. */
.yb-callnote__mark {
	margin-left: 1px;
	font-size: 0.7em;
	vertical-align: super;
	line-height: 0;
	opacity: 0.7;
}

.yb-callnote {
	display: block;
	margin-top: 4px;
	font-family: var(--yb-font-body);
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: none;
	opacity: 0.55;
}


/* Переносы текста. По умолчанию — строки равной длины (balance): короткие подводки, подписи
 * карточек и заголовки не оставляют «хвостов» вроде «a aprender.» или «do / seu cabelo.».
 * Браузер выравнивает только блоки до ~6 строк, длиннее — обычный перенос.
 * Длинный текст статьи, отзывов и комментариев — pretty: обычная ширина строк, без одиночного слова в конце. */
body h1,
body h2,
body h3,
body h4,
body p,
body li,
body dd,
body figcaption {
	text-wrap: balance;
}

body .yb-post__content p,
body .yb-post__content li,
body .yb-about__text p,
body .yb-reviews__text,
body .yb-comment__text p {
	text-wrap: pretty;
}

/* Карточка автора стоит внутри текста статьи, но тексты в ней короткие — выравниваем. */
body .yb-post__content .yb-author p,
body .yb-post__content .yb-author li {
	text-wrap: balance;
}

/* Тема обрезает горизонтальный вылет через overflow: hidden у body и #page-top — из-за этого они
 * становятся контейнерами прокрутки и position: sticky не работает (рубрики блога, главы «Serviços»).
 * clip обрезает так же, но контейнер прокрутки не создаёт. Раньше это было только в post.css. */
body,
#page-top {
	overflow-x: clip !important;
	overflow-y: visible !important;
}