/**
 * Student24 — дизайн-токены (светлая просторная тема, в духе mdac: ширина контейнера, сине-красная схема).
 * Шрифт: Manrope — геометрический гротеск, аналог TT Norms Pro (Avtor24), отличная кириллица.
 */
:root {
	/* === Шрифт (Manrope — геометрический, чистый, как у Avtor24) === */
	--s24-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	/* Вордмарк в шапке: Outfit (плотнее и «логотипнее», чем Manrope в интерфейсе) */
	--s24-font-logo: 'Outfit', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	/* Бренд — те же значения, что в проекте mdac (`mdac/assets/css/index.css` :root --primary / --primary-dark / --primary-light) */
	--s24-primary: hsl(211 99% 42%);
	/* --s24-primary: hsl(227, 100%, 57%); */
	--s24-primary-hover: hsl(211 99% 32%);
	/* --s24-primary-hover: hsl(227, 100%, 32%); */
	--s24-primary-light: hsl(211 99% 52%);
	/*--s24-primary-light: hsl(227, 100%, 52%); */
	--s24-primary-soft: color-mix(in srgb, var(--s24-primary) 14%, white);
	--s24-primary-muted: color-mix(in srgb, var(--s24-primary) 55%, white);

	/* Текст и нейтрали */
	--s24-ink: #0d1d4a;
	--s24-text: #0f172a;
	--s24-text-muted: #64748b;
	--s24-text-secondary: #475569;
	--s24-text-soft: #94a3b8;
	--s24-text-on-dark: #e2e8f0;
	--s24-text-on-dark-muted: #94a3b8;
	--s24-text-on-dark-bright: #f8fafc;
	/* Текст и ссылки на фоне --s24-primary (CTA-баннер и т.п.) */
	--s24-on-primary: #ffffff;
	--s24-on-primary-soft: rgb(255 255 255 / 0.92);
	--s24-on-primary-muted: rgb(255 255 255 / 0.75);

	/* Семантические цвета (статусы, алерты, бейджи) */
	--s24-success: rgba(0, 160, 0, 0.85);
	--s24-danger: #dc2626;
	--s24-danger-soft: rgba(218, 0, 0, 0.65);
	--s24-info: rgba(0, 0, 255, 0.75);
	--s24-warning: #fbeab5;
	/* Warning-ink для текст/иконок (напр. chip-кнопки warning) */
	--s24-warning-ink: #b45309;
	--s24-warning-ink-hover: #92400e;
	--s24-badge-bg: #bbf7d0;
	--s24-badge-text: #14532d;

	/* Поверхности и границы */
	--s24-border: #e2e8f0;
	--s24-border-strong: #cbd5e1;
	/* Фокус полей: мягкий, едва заметный акцент */
	--s24-border-focus: color-mix(in srgb, var(--s24-primary) 30%, var(--s24-border));
	--s24-surface: #ffffff;
	--s24-surface-alt: #f7f8fb;
	--s24-surface-dim: #e3e3e3;
	--s24-page-bg: #f1f4f9;
	--s24-overlay-dark: rgba(0, 0, 0, 0.50);
	--s24-overlay-light: rgba(238, 238, 238, 0.65);

	/* Радиусы (mdac / shadcn: ~1rem на кнопках) */
	--s24-radius-sm: 6px;
	--s24-radius-md: 12px;
	--s24-radius-lg: 16px;
	--s24-radius-xl: 24px;

	/* Тени */
	--s24-shadow-card: 0 4px 24px rgba(15, 23, 42, 0.06);
	--s24-shadow-card-soft: 0 1px 3px rgba(15, 23, 42, 0.04);
	--s24-shadow-soft: 0 4px 20px -4px color-mix(in srgb, var(--s24-primary) 18%, transparent);
	--s24-shadow-input: none;
	--s24-shadow-input-focus: 0 0 0 2px color-mix(in srgb, var(--s24-primary) 6%, transparent);

	/* Типографика (font-size / line-height пары) */
	--s24-heading-xl: clamp(1.5rem, 3vw, 2.25rem);      /* ~36px на десктопе */
	--s24-heading-lg: clamp(1.25rem, 2.5vw, 1.75rem);   /* ~28px */
	--s24-heading-md: clamp(1.125rem, 2vw, 1.375rem);   /* ~22px */
	--s24-heading-sm: 1.125rem;                          /* 18px */
	--s24-body: 1.0625rem;                               /* 17px */
	--s24-body-sm: 0.9375rem;                            /* 15px — кнопки, акценты */
	--s24-caption: 0.9rem;                               /* мелкий текст, контролы */
	--s24-label: 0.8125rem;                              /* 13px */
	--s24-lh-tight: 1.25;
	--s24-lh-base: 1.45;
	--s24-lh-relaxed: 1.6;

	/* Макет */
	--s24-content-max: 920px;
	--s24-content-narrow: 767px;
	/*
	 * Full-bleed блоки (100vw + calc(50% - 50vw)): у 100vw ширина часто включает полосу прокрутки,
	 * из‑за чего на 100% масштаба контент «плывёт» относительно фиксированной шапки; при зуме округление меняется.
	 * dvw + scrollbar-gutter на html снижают расхождение.
	 */
	--s24-breakout-width: 100vw;
	--s24-breakout-shift: calc(50% - 50vw);
	--s24-section-pad: clamp(16px, 4vw, 40px);
	--s24-section-gap: clamp(60px, 8vw, 100px);
	--s24-section-gap-sm: clamp(40px, 5vw, 60px);

	/* Шаг сетки отступов (4/8/12… px) */
	--s24-space-1: 4px;
	--s24-space-2: 8px;
	--s24-space-3: 12px;
	--s24-space-4: 16px;
	--s24-space-5: 20px;
	--s24-space-6: 24px;
	--s24-space-7: 28px;
	--s24-space-8: 32px;

	/* Card padding — единый адаптивный отступ для всех контентных карточек */
	--s24-card-pad-y: var(--s24-space-6);
	--s24-card-pad-x: var(--s24-space-6);

	/* Переходы */
	--s24-transition-fast: 0.15s ease;
	--s24-transition-base: 0.25s linear;

	/* Footer */
	--s24-footer-bg: #0f172a;
	--s24-footer-border: rgba(148, 163, 184, 0.15);

	/* Контролы (floating circles) */
	--s24-control-bg: #565656;

	/* Hero — светлый холодный фон как у mdac (white → blue-50 → #f0f5ff), без тёмного синего на краю */
	--s24-hero-bg-from: #ffffff;
	--s24-hero-bg-via: #eff6ff;
	--s24-hero-bg-to: #f0f5ff;
	--s24-hero-shadow: 0 8px 32px -8px hsl(211 99% 42% / 0.12);

	/* === Accent (CTA, success) === */
	--s24-accent: #16a34a;
	--s24-accent-hover: #15803d;
	--s24-accent-soft: color-mix(in srgb, var(--s24-accent) 12%, white);

	/* === Cards === */
	--s24-shadow-card-hover: 0 8px 32px rgba(15, 23, 42, 0.10);
	--s24-shadow-elevated: 0 12px 40px rgba(15, 23, 42, 0.12);
	--s24-shadow-btn-hover: 0 6px 20px -4px color-mix(in srgb, var(--s24-primary) 30%, transparent);

	/* Плательщик: users.personalinfo.tpl → table.s24-payer-form (единая max-ширина полей) */
	--s24-payer-field-max-width: 320px;

	/* === Steps === */
	--s24-step-number-bg: var(--s24-primary);
	--s24-step-number-text: #ffffff;
	--s24-step-line: var(--s24-border);

	/* === Stars (reviews) === */
	--s24-star-color: #f5c518;
	--s24-star-empty: #ddd;
	--s24-star-size: 1.5rem;

	/* === Extra spacing === */
	--s24-space-10: 40px;
	--s24-space-12: 48px;
	--s24-space-16: 64px;

	/* Unified section vertical padding (desktop 80px, mobile via media query) */
	--s24-space-section: 80px;
	--s24-space-section-title-mb: 48px;

	/* === Heading 2xl/3xl for hero & section titles === */
	--s24-heading-2xl: clamp(1.75rem, 3.5vw, 2.75rem);
	--s24-heading-3xl: clamp(2.25rem, 5vw, 3.5rem);

	/* === Content width === */
	--s24-content-wide: 1200px;

	/* Фиксированная шапка + зазор до контента (см. s24-base #main.content) */
	--s24-header-height: 64px;
	--s24-main-pad-top: calc(var(--s24-header-height) + 28px);

	/* Нижняя панель на телефонах (иконки + подписи + бургер) */
	--s24-bottom-nav-height: 56px;
}

@supports (width: 100dvw) {
	:root {
		--s24-breakout-width: 100dvw;
		--s24-breakout-shift: calc(50% - 50dvw);
	}
}

/* Fallback без color-mix (старые браузеры) */
@supports not (color: color-mix(in srgb, white 50%, black)) {
	:root {
		--s24-primary: #0478e6;
		--s24-primary-hover: #0256a8;
		--s24-primary-light: #1a8cff;
		--s24-primary-soft: #e8f2fc;
		--s24-primary-muted: #7eb6f0;
		--s24-border-focus: #8ab4e8;
		--s24-shadow-input-focus: 0 0 0 2px rgba(4, 120, 230, 0.06);
		--s24-shadow-soft: 0 4px 20px -4px rgba(4, 120, 230, 0.14);
		--s24-shadow-btn-hover: 0 6px 20px -4px rgba(4, 120, 230, 0.28);
		--s24-accent-soft: #e6f4ea;
	}
}

/* === Responsive card padding === */
@media (max-width: 767px) {
	:root {
		--s24-card-pad-y: var(--s24-space-4);
		--s24-card-pad-x: var(--s24-space-5);
	}
}
@media (max-width: 480px) {
	:root {
		--s24-card-pad-y: var(--s24-space-3);
		--s24-card-pad-x: var(--s24-space-4);
	}
}