/* Ultra-Consolidated CSS - Production Grade & KISS */

/* Fonts */
@font-face {
	font-family: "Overpass";
	src: url("./Overpass.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* CSS Variables */
:root {
	/* Colors */
	--primary-color: #fbf0df;
	--text-secondary: rgb(209 213 219);
	--text-dark: rgb(17 24 39);
	--bg-primary: #0a0a0a;
	--border-gray: rgb(31 41 55);

	/* Gradients & Effects */
	--code-gradient: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
	--glass-bg: rgba(255, 255, 255, 0.03);
	--glass-border: rgba(255, 255, 255, 0.08);

	/* Shadows */
	--shadow-glass:
		0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0
		rgba(255, 255, 255, 0.1);
	--shadow-card-hover:
		0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0
		rgba(255, 255, 255, 0.1);
	--shadow-status: 0 2px 8px rgba(0, 0, 0, 0.15);
	--shadow-default:
		0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Spacing & Sizing */
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--spacing-2xl: 4rem;
	--radius-sm: 0.75rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;

	/* Transitions */
	--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-card: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: Overpass, system-ui, sans-serif;
	background: var(--bg-primary);
	background-image:
		radial-gradient(
			circle at 20% 50%,
			rgba(120, 119, 198, 0.3),
			transparent 50%
		),
		radial-gradient(
			circle at 80% 20%,
			rgba(255, 119, 198, 0.3),
			transparent 50%
		),
		radial-gradient(
			circle at 40% 80%,
			rgba(120, 119, 198, 0.2),
			transparent 50%
		);
	background-attachment: fixed;
	color: var(--primary-color);
	line-height: 1.625;
}

a {
	text-decoration: none;
	color: inherit;
}

/* Utility Classes */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Layout System */
.container {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}
.main-content {
	padding: var(--spacing-xl) 0;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.flex-center.gap-sm {
	gap: var(--spacing-sm);
}
.flex-center.gap-lg {
	gap: var(--spacing-lg);
}
.flex-center.mt-xl {
	margin-top: var(--spacing-xl);
}
.flex-center.mb-lg {
	margin-bottom: var(--spacing-lg);
}

.section-hero {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
}
.section-title {
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 600;
	margin-bottom: 2.5rem;
	text-align: center;
}

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

@media (min-width: 768px) {
	.responsive-grid.cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.responsive-grid.cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Card System */
.card {
	border-radius: var(--radius-md);
	transition: var(--transition-card);
}
.card.glass {
	backdrop-filter: blur(20px);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-glass);
}
.card.feature {
	padding: 2.5rem;
}
.card.content {
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
}
.card.footer {
	padding: var(--spacing-md);
	backdrop-filter: blur(12px);
	text-align: center;
}
.card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-card-hover);
}

/* Button System */
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--spacing-sm);
	line-height: 1.5;
	width: 14rem;
	transition: var(--transition-smooth);
	border: none;
	cursor: pointer;
}
.btn:hover {
	transform: translateY(-0.25rem);
}
.btn.github {
	background: rgb(0 0 0);
	border: 1px solid var(--border-gray);
}
.btn.npm {
	background: linear-gradient(to right, #dc2626, #b91c1c);
	box-shadow: var(--shadow-default);
	color: white;
}
.btn.npm:hover {
	background: linear-gradient(to right, #ef4444, #dc2626);
	box-shadow:
		0 10px 15px -3px rgb(239 68 68 / 0.25),
		0 4px 6px -4px rgb(239 68 68 / 0.25);
}
.text-red {
	color: #dc2626;
}
.btn.docs {
	background: var(--primary-color);
	color: var(--text-dark);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-default);
}
.btn-icon {
	width: 1.25rem;
	height: 1.25rem;
}
.btn.github .btn-icon,
.btn.npm .btn-icon {
	filter: brightness(0) invert(1);
}

/* Content Specific */
.hero-logo {
	height: 12rem;
	object-fit: contain;
	filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
		drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}
.hero-desc {
	font-size: 1.25rem;
	color: var(--text-secondary);
	max-width: 42rem;
	margin: 0 auto var(--spacing-lg) auto;
	font-weight: 300;
}

.feature-emoji {
	font-size: 2.25rem;
	line-height: 2.5rem;
	margin-bottom: var(--spacing-md);
}
.feature-title {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	margin-bottom: var(--spacing-md);
}
.feature-desc {
	color: var(--text-secondary);
	font-size: 1.125rem;
	line-height: 1.625;
}

.security-grid {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}
.security-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	backdrop-filter: blur(8px);
}
.security-item[data-type="fatal"] {
	background: linear-gradient(
		to right,
		rgb(239 68 68 / 0.1),
		rgb(220 38 38 / 0.1)
	);
	border: 1px solid rgb(239 68 68 / 0.2);
}
.security-item[data-type="warning"] {
	background: linear-gradient(
		to right,
		rgb(234 179 8 / 0.1),
		rgb(202 138 4 / 0.1)
	);
	border: 1px solid rgb(234 179 8 / 0.2);
}

.security-badge {
	padding: 0.5rem var(--spacing-sm);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	box-shadow: var(--shadow-status);
}
.security-badge[data-type="fatal"] {
	background: linear-gradient(to right, #ef4444, #dc2626);
}
.security-badge[data-type="warning"] {
	background: linear-gradient(to right, #eab308, #ca8a04);
}

.security-content h4 {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	margin: 0 0 0.25rem 0;
}
.security-content p {
	color: var(--text-secondary);
	margin: 0;
}

.code-block {
	background: var(--code-gradient);
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: var(--spacing-lg);
	border-radius: var(--radius-md);
	overflow-x: auto;
}
.code-content {
	color: var(--text-secondary);
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.footer-section {
	padding: var(--spacing-lg) 0;
}
.footer-text {
	color: var(--text-secondary);
	margin: 0;
}