@font-face {
	font-family: "Inter";
	src: url("fonts/inter-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "TikTok Sans";
	src: url("fonts/tiktok-sans-variable.ttf") format("truetype");
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
}

:root {
	--color-accent: #ffffff;
	--color-surface: #050505;
	--color-panel: #0d0d0d;
	--color-panel-high: #171717;
	--color-border: #2b2b2b;
	--color-text: #f5f5f5;
	--color-muted: #9a9a9a;
	--radius-shell: 4px;
	--radius-card: 3px;
	--radius-thumb: 2px;
	--radius-pill: 2px;
	--focus-ring-width: 2px;
	--focus-ring-color: #ffffff;
	--focus-ring-offset: 4px;
	--cta-hover-lift: -3px;
	--cta-active-lift: -1px;
	--cta-hover-shadow: none;
	/* Именованные типографические стили — аналог Paragraph/Text Styles. */
	--text-page-title: clamp(3rem, 4.2vw, 4.8rem);
	--weight-page-title: 600;
	--leading-page-title: .78;
	--tracking-page-title: -.075em;
	--text-page-intro: .9rem;
	--weight-page-intro: 430;
	--leading-page-intro: 1.55;
	--text-display-xl: clamp(3rem, 4vw, 4rem);
	--text-display-lg: clamp(2.75rem, 3vw, 3.35rem);
	--text-display-md: clamp(2.5rem, 2.3vw, 3rem);
	--text-display-section: clamp(2.4rem, 2.6vw, 3.25rem);
	--text-display-subsection: clamp(2rem, 1.8vw, 2.4rem);
	--leading-display-xl: .72;
	--leading-display-lg: .76;
	--leading-display-md: .79;
	--leading-display-section: .9;
	--leading-display-subsection: .9;
	--tracking-display-xl: -.08em;
	--tracking-display-lg: -.075em;
	--tracking-display-md: -.08em;
	--tracking-display-section: -.06em;
	--tracking-display-subsection: -.055em;
	--text-lead: clamp(1rem, 1.25vw, 1.22rem);
	--leading-lead: 1.65;
	--text-body-lg: clamp(1rem, 1.15vw, 1.16rem);
	--leading-body-lg: 1.72;
	--text-body: clamp(.9rem, 1vw, 1rem);
	--leading-body: 1.6;
	--text-body-sm: .84rem;
	--leading-body-sm: 1.5;
	--text-card-title: clamp(1.25rem, 1.8vw, 1.8rem);
	--text-label: .64rem;
	--leading-label: 1.4;
	--tracking-label: .13em;
	--text-caption: .62rem;
	--leading-caption: 1.45;
	--tracking-caption: .08em;
	--text-card-meta: .58rem;
	--text-action: .76rem;
	--text-navigation: .72rem;
}

@media (max-width: 700px) {
	:root {
		--text-page-title: clamp(3rem, 14vw, 4.15rem);
		--text-display-xl: clamp(3.75rem, 17vw, 4.25rem);
		--text-display-lg: clamp(3.1rem, 14vw, 3.7rem);
		--text-display-md: clamp(2.65rem, 11.5vw, 3rem);
		--text-display-section: clamp(2.35rem, 12vw, 3.8rem);
		--text-display-subsection: clamp(2.35rem, 12vw, 3.8rem);
		--text-lead: 1rem;
		--leading-lead: 1.6;
		--text-body-lg: 1rem;
		--text-label: .7rem;
		--leading-label: 1.5;
		--tracking-label: .1em;
		--text-caption: .7rem;
		--leading-caption: 1.5;
		--text-card-meta: .65rem;
		--text-action: .78rem;
		--text-navigation: .65rem;
	}
}