/* Base Styles */
@import url('base/reset.css');
@import url('base/variables.css');
@import url('base/utilities.css');

/* Components */
@import url('components/buttons.css');
@import url('components/header.css');
@import url('components/section.css');
@import url('components/footer.css');
@import url('components/cards.css');
@import url('components/code.css');

/* Sections */
@import url('sections/hero.css');
@import url('sections/quickstart.css');
@import url('sections/features.css');
@import url('sections/about.css');
@import url('sections/console.css');

/* Footer */
.footer {
	padding: var(--spacing-3xl) 0 var(--spacing-xl);
	background: var(--color-background);
	border-top: 1px solid var(--color-border);
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
}

.footer-section h3 {
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--color-text-primary);
	margin-bottom: var(--spacing-md);
}

.footer-text {
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: var(--spacing-md);
	font-size: var(--font-size-sm);
}

.footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer-link {
	color: var(--color-text-secondary);
	transition: color var(--transition-fast);
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.footer-link:hover {
	color: var(--color-primary);
}

.social-links {
	display: flex;
	gap: var(--spacing-md);
	margin-top: var(--spacing-md);
}

.social-link {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	transition: all var(--transition-base);
}

.social-link:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: white;
	transform: translateY(-0.125rem);
}

.footer-bottom {
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
	text-align: center;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.footer-bottom p {
	margin-bottom: var(--spacing-xs);
}

.footer-bottom a {
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

.footer-bottom a:hover {
	color: var(--color-primary-light);
}

@media (max-width: 768px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}
}