/* ══════════════════════════════════════════════════════════════════════════════
   SPLINKLY BOOTSTRAP THEME CUSTOMIZATION
   ──────────────────────────────────────────────────────────────────────────────
   Override Bootstrap's default colors with Splinkly brand colors.
   Use standard Bootstrap utility classes (.text-primary, .bg-primary, etc.)
   throughout the application for easy color management.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Override Bootstrap's smooth scroll so Blazor enhanced navigation
   resets scroll position instantly on page transitions.
   In-page anchor scrolling uses JS smooth scroll instead. */
html {
	scroll-behavior: auto !important;
}

:root {
	/* ── Bootstrap Color Overrides ────────────────────────────────────────── */
	/* Primary: Splinkly brand blue */
	--bs-primary: #2563eb;
	--bs-primary-rgb: 37, 99, 235;
	--bs-primary-hover: #1d4ed8;
	
	/* Secondary: Slate gray for muted content */
	--bs-secondary: #475569;
	--bs-secondary-rgb: 71, 85, 105;
	
	/* Info: Teal accent for gradients and highlights */
	--bs-info: #14b8a6;
	--bs-info-rgb: 20, 184, 166;
	
	/* Light: Surface backgrounds */
	--bs-light: #f5f7fb;
	--bs-light-rgb: 245, 247, 251;
	
	/* Dark: Primary text and dark elements */
	--bs-dark: #0f172a;
	--bs-dark-rgb: 15, 23, 42;
	
	/* ── Custom Splinkly Variables ────────────────────────────────────────── */
	--splinkly-primary-light: #60a5fa;
	--splinkly-surface-dark: #eef2f7;
	--splinkly-card-bg: rgba(255, 255, 255, 0.85);
	--splinkly-card-border: rgba(15, 23, 42, 0.08);
	--splinkly-placeholder-bg: rgba(15, 23, 42, 0.04);
	--splinkly-placeholder-border: rgba(15, 23, 42, 0.12);
	--splinkly-primary-shadow: rgba(37, 99, 235, 0.35);
	--splinkly-hero-glow-opacity: 0.08;
	--splinkly-feature-glow-opacity: 0.05;
}

body {
	background: var(--bs-light);
	color: var(--bs-dark);
}

/* ── Bootstrap Button Enhancements ────────────────────────────────────────── */
.btn-primary {
	transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px var(--splinkly-primary-shadow);
}

.btn-outline-secondary:hover {
	border-color: rgba(var(--bs-primary-rgb), 0.35);
	background: rgba(var(--bs-primary-rgb), 0.12);
	color: var(--bs-dark);
}

/* ── Text Gradient Utility (Custom) ───────────────────────────────────────── */
.text-gradient {
	background: linear-gradient(135deg, var(--splinkly-primary-light), var(--bs-info));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ── Background Utilities (Bootstrap-style additions) ─────────────────────── */
.bg-primary-subtle {
	background: rgba(var(--bs-primary-rgb), 0.12) !important;
}

.bg-surface {
	background: var(--bs-light) !important;
}

.bg-surface-dark {
	background: var(--splinkly-surface-dark) !important;
}