/* Brand Colour Variables */
:root {
	--color-growth-green: #1A6349;
	--color-dark-moss: #0A271C;
	--color-sea-foam: #EAF2EB;
	--color-roam-accent: #30FFB2;
	--color-silt: #E8EAE5;
	--color-destructive-red: #c81e1e;
}

body {
	font-family: 'Inter', sans-serif;
	background-color: var(--color-sea-foam); /* Brand background color */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.btn, .connector-card {
	transition: all 0.2s ease-in-out;
}
.connector-card:not(.unavailable):hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.connected {
	border-color: #22c55e; /* Green-500 */
}
/* Style for unavailable cards */
.unavailable {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: #f3f4f6; /* gray-100 */
}
.logo-container svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Branded connect button with hover state */
.btn-brand-connect {
	background-color: var(--color-growth-green);
}
.btn-brand-connect:hover {
	background-color: var(--color-dark-moss);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}