:root {
	/*
	|--------------------------------------------------------------------------
	| Identidade TH
	|--------------------------------------------------------------------------
	*/

	--th-wine: #b40b20;
	--th-wine-dark: #750715;
	--th-wine-deep: #45030c;
	--th-red: #ff0011;

	--th-gray-950: #161415;
	--th-gray-900: #242223;
	--th-gray-800: #474747;
	--th-gray-600: #686366;
	--th-gray-500: #7d7679;
	--th-gray-300: #c9c5c7;
	--th-gray-200: #dedbdd;
	--th-gray-100: #f3f1f2;
	--th-gray-050: #f8f7f7;

	--th-white: #ffffff;
	--th-black: #101010;

	--th-wine-rgb: 180 11 32;
	--th-red-rgb: 255 0 17;
	--th-black-rgb: 16 16 16;
	--th-white-rgb: 255 255 255;

	/*
	|--------------------------------------------------------------------------
	| Tipografia
	|--------------------------------------------------------------------------
	|
	| As fontes definitivas serão adicionadas depois que confirmarmos
	| exatamente os arquivos e as famílias utilizadas pela TH.
	*/

	--font-display:
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;

	--font-body:
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;

	--font-label:
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;

	--text-xs: 0.6875rem;
	--text-sm: 0.8125rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.375rem;
	--text-xl: 1.75rem;

	--title-sm: clamp(2rem, 4vw, 3.5rem);
	--title-md: clamp(2.75rem, 6vw, 5.5rem);
	--title-lg: clamp(3.5rem, 7.5vw, 7.5rem);

	/*
	|--------------------------------------------------------------------------
	| Estrutura
	|--------------------------------------------------------------------------
	*/

	--container: 1320px;
	--container-wide: 1600px;
	--container-text: 760px;

	--page-gutter: clamp(20px, 4vw, 72px);
	--header-height: 88px;

	--section-space-sm: clamp(72px, 8vw, 120px);
	--section-space: clamp(96px, 10vw, 180px);
	--section-space-lg: clamp(120px, 14vw, 240px);

	/*
	|--------------------------------------------------------------------------
	| Espaçamentos
	|--------------------------------------------------------------------------
	*/

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/*
	|--------------------------------------------------------------------------
	| Bordas e sombras
	|--------------------------------------------------------------------------
	*/

	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 24px;
	--radius-xl: 36px;
	--radius-pill: 999px;

	--shadow-soft:
		0 18px 50px rgb(var(--th-black-rgb) / 0.12);

	--shadow-medium:
		0 28px 80px rgb(var(--th-black-rgb) / 0.18);

	--shadow-strong:
		0 40px 120px rgb(var(--th-black-rgb) / 0.28);

	/*
	|--------------------------------------------------------------------------
	| Liquid Glass
	|--------------------------------------------------------------------------
	*/

	--glass-light-background:
		rgb(var(--th-white-rgb) / 0.12);

	--glass-light-border:
		rgb(var(--th-white-rgb) / 0.22);

	--glass-dark-background:
		rgb(var(--th-black-rgb) / 0.38);

	--glass-dark-border:
		rgb(var(--th-white-rgb) / 0.14);

	--glass-wine-background:
		rgb(var(--th-wine-rgb) / 0.28);

	--glass-blur: 20px;
	--glass-saturation: 150%;

	/*
	|--------------------------------------------------------------------------
	| Transições
	|--------------------------------------------------------------------------
	*/

	--transition-fast: 180ms ease;
	--transition-base: 320ms cubic-bezier(0.22, 1, 0.36, 1);
	--transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);

	/*
	|--------------------------------------------------------------------------
	| Camadas
	|--------------------------------------------------------------------------
	*/

	--z-background: 0;
	--z-content: 10;
	--z-floating: 30;
	--z-header: 100;
	--z-menu: 200;
	--z-modal: 500;
}

@media (max-width: 767px) {
	:root {
		--page-gutter: 20px;
		--header-height: 74px;
		--section-space-sm: 64px;
		--section-space: 88px;
		--section-space-lg: 112px;
		--glass-blur: 16px;
	}
}