/**
 * Глобальные цвета и шрифты темы dr_hug.
 * Значения из макета Figma «Dr.Hug | Adaptive».
 */

:root {
	/* Цвета (Figma Dr.Hug | 04.09.2026) */
	--dr-hug-pink: #f04b60;
	--dr-hug-pink-light: #ff94a0;
	--dr-hug-pink-bg: #fef5f5;
	--dr-hug-black: #434855;
	--dr-hug-grey: #808899;
	--dr-hug-grey-light: #e9ebf0;
	--dr-hug-grey-bg: #f3f4f8;
	--dr-hug-white: #fff;
	--dr-hug-bg: #f8f5f3;
	--dr-hug-third-taupe: #b28f80;
	--dr-hug-third-blush: #d6bfb7;
	--dr-hug-third-sage: #c9d1c6;
	--dr-hug-third-golden-sand: #ebbd72;
	--dr-hug-primary-warm-ivory: #ede1da;
	--dr-hug-feature-tone-0: #dfe3ea;
	--dr-hug-feature-tone-1: #ead6d0;
	--dr-hug-feature-tone-2: #d6bfb7;
	--dr-hug-feature-tone-3: #ebbd72;
	--dr-hug-related-tone-0: #b89d80;
	--dr-hug-related-tone-1: #aab8c0;
	--dr-hug-related-tone-2: #d6bfb7;

	/* Семейство шрифтов */
	--dr-hug-font-family: "Muller", sans-serif;

	/* Размеры шрифтов */
	--dr-hug-font-size-xxl: 42px;
	--dr-hug-font-size-xl: 32px;
	--dr-hug-font-size-lg: 24px;
	--dr-hug-font-size-md: 20px;
	--dr-hug-font-size-base: 18px;
	--dr-hug-font-size-sm: 16px;
	--dr-hug-font-size-xs: 14px;

	/* Насыщенность */
	--dr-hug-font-weight-regular: 400;
	--dr-hug-font-weight-medium: 500;
	--dr-hug-font-weight-bold: 700;

	/* Сетка контента: 1200px без боковых отступов на десктопе.
	   На узких экранах возвращаем gutter, чтобы контент не прилипал к краям. */
	--dr-hug-content-width: 1200px;
	--dr-hug-content-gutter: 0;

	/* Hover lift for content cards (departments pattern) */
	--dr-hug-card-hover-shadow: 0 8px 24px rgba(67, 72, 85, 0.08);
}

@media (max-width: 1239px) {
	:root {
		--dr-hug-content-gutter: 20px;
	}
}

/* Mobile typography: headings 20 / body 16 / small 14. Desktop tokens unchanged. */
@media (max-width: 767px) {
	:root {
		--dr-hug-font-size-xxl: 20px;
		--dr-hug-font-size-xl: 20px;
		--dr-hug-font-size-lg: 20px;
		--dr-hug-font-size-md: 20px;
		--dr-hug-font-size-base: 16px;
		--dr-hug-font-size-sm: 16px;
		--dr-hug-font-size-xs: 14px;
	}
}

/**
 * Shared card hover — lift + soft shadow (Figma departments).
 * Page CSS may extend the transition list; keep transform + box-shadow.
 */
.department-card,
.service-card,
a.promotion-card,
.poleznoe-category-card,
.article-card,
.vacancy-card,
.specialist-card,
.homepage-doctor-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.department-card:hover,
.department-card:focus-visible,
.service-card:hover,
.service-card:focus-visible,
a.promotion-card:hover,
a.promotion-card:focus-visible,
.poleznoe-category-card:hover,
.poleznoe-category-card:focus-visible,
.article-card:hover,
.article-card:focus-visible,
.vacancy-card:hover,
.vacancy-card:focus-visible,
.specialist-card:hover,
.specialist-card:focus-visible,
.homepage-doctor-card:hover,
.homepage-doctor-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--dr-hug-card-hover-shadow);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.department-card,
	.service-card,
	a.promotion-card,
	.poleznoe-category-card,
	.article-card,
	.vacancy-card,
	.specialist-card,
	.homepage-doctor-card {
		transition: none;
	}

	.department-card:hover,
	.department-card:focus-visible,
	.service-card:hover,
	.service-card:focus-visible,
	a.promotion-card:hover,
	a.promotion-card:focus-visible,
	.poleznoe-category-card:hover,
	.poleznoe-category-card:focus-visible,
	.article-card:hover,
	.article-card:focus-visible,
	.vacancy-card:hover,
	.vacancy-card:focus-visible,
	.specialist-card:hover,
	.specialist-card:focus-visible,
	.homepage-doctor-card:hover,
	.homepage-doctor-card:focus-visible {
		transform: none;
		box-shadow: none;
	}
}

/* iOS-safe scroll lock while any modal is open */
html.dr-hug-scroll-locked,
html.dr-hug-scroll-locked body {
	overflow: hidden;
	overscroll-behavior: none;
}

html.dr-hug-scroll-locked body {
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
}

/* Shared modal enter/leave motion */
.appointment-modal,
.article-media-modal,
.education-modal,
.prices-promo-modal,
.specialist-story-modal {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.28s ease,
		visibility 0.28s ease;
}

.appointment-modal.is-visible,
.article-media-modal.is-visible,
.education-modal.is-visible,
.prices-promo-modal.is-visible,
.specialist-story-modal.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.appointment-modal__dialog,
.article-media-modal__dialog,
.education-modal__dialog,
.prices-promo-modal__dialog,
.specialist-story-modal__shell {
	transform: translateY(12px) scale(0.98);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.appointment-modal.is-visible .appointment-modal__dialog,
.article-media-modal.is-visible .article-media-modal__dialog,
.education-modal.is-visible .education-modal__dialog,
.prices-promo-modal.is-visible .prices-promo-modal__dialog,
.specialist-story-modal.is-visible .specialist-story-modal__shell {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.appointment-modal,
	.article-media-modal,
	.education-modal,
	.prices-promo-modal,
	.specialist-story-modal,
	.appointment-modal__dialog,
	.article-media-modal__dialog,
	.education-modal__dialog,
	.prices-promo-modal__dialog,
	.specialist-story-modal__shell {
		transition: none;
		transform: none;
	}
}