/* Custom styling and effects for AP Stream Deck Showcase Portal */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
	--brand-cyan: #00e5ff;
	--brand-blue: #3b82f6;
	--brand-purple: #a855f7;
	--brand-amber: #f59e0b;
	--brand-emerald: #10b981;
}

body {
	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
	background-color: #080b11;
	color: #f1f5f9;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
	font-family: "Outfit", sans-serif;
}

code,
pre,
.font-mono {
	font-family: "JetBrains Mono", monospace;
}

/* Glow effects */
.glow-cyan {
	box-shadow: 0 0 35px -5px rgba(0, 229, 255, 0.25);
}

.glow-purple {
	box-shadow: 0 0 35px -5px rgba(168, 85, 247, 0.25);
}

.glow-blue {
	box-shadow: 0 0 35px -5px rgba(59, 130, 246, 0.25);
}

.glow-card {
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glow-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 20px 40px -15px rgba(0, 229, 255, 0.15),
		0 0 0 1px rgba(0, 229, 255, 0.25);
}

/* Glass panel */
.glass-panel {
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-nav {
	background: rgba(8, 11, 17, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gradient text */
.gradient-text-cyan {
	background: linear-gradient(135deg, #ffffff 20%, #00e5ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gradient-text-purple {
	background: linear-gradient(135deg, #ffffff 20%, #c084fc 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gradient-text-fire {
	background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ef4444 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Background animated gradient or grid */
.bg-grid {
	background-size: 40px 40px;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Stream deck key badge style */
.key-cap {
	border-radius: 10px;
	background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.15),
		0 4px 6px -1px rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.08);
}