:root {
	--xytex-white: #ffffff;
	--xytex-navy: #003B71;
	--xytex-gold: #FFB547;
	--xytex-teal: #63D0DF;
	--xytex-teal-dark: #00ACC8;
	--xytex-teal-hover: color-mix(in srgb, var(--xytex-teal-dark) 72%, var(--xytex-navy) 28%);
	--xytex-teal-light: color-mix(in srgb, var(--xytex-teal) 28%, var(--xytex-white));
	--xytex-teal-xlight: color-mix(in srgb, var(--xytex-teal) 14%, var(--xytex-white));
	--xytex-slate: #55565A;
	--xytex-slate-dark: #262729;
	--xytex-gray-border: #DBD9D6;
	--xytex-gray-bg: color-mix(in srgb, #D2D0CD 28%, var(--xytex-white));
	--xytex-text: #262729;
	--xytex-text-muted: #99999A;
	--xytex-danger: #003B71;
	--xytex-radius: 8px;
	--xytex-radius-lg: 14px;
	--xytex-shadow: 0 2px 16px rgba(99, 208, 223, 0.12);
	--xytex-shadow-lg: 0 8px 40px rgba(99, 208, 223, 0.2);
	--xytex-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.xytex-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 34px;
	border-radius: var(--xytex-radius);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: var(--xytex-transition);
	border: 2px solid transparent;
}

.xytex-btn--primary {
	background: var(--xytex-teal-dark);
	color: var(--xytex-white);
	border-color: var(--xytex-teal-dark);
}

.xytex-btn--primary:hover:not(:disabled) {
	background: var(--xytex-teal-hover);
	border-color: var(--xytex-teal-hover);
	transform: translateY(-1px);
}

.xytex-btn--primary:disabled {
	opacity: 0.42;
	cursor: not-allowed;
}

.xytex-btn--ghost {
	background: transparent;
	color: var(--xytex-text-muted);
	border-color: var(--xytex-gray-border);
}

.xytex-btn--ghost:hover {
	background: var(--xytex-gray-bg);
	color: var(--xytex-text);
	border-color: var(--xytex-gray-border);
}

.xytex-icon-circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--xytex-teal-xlight);
	color: var(--xytex-teal-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}