/* Base Typography & Variables */
:root {
	--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
	--gradient-start: #6366f1; /* indigo-500 */
	--gradient-end: #ec4899;   /* pink-500 */
	--surface: #ffffff;
	--surface-alt: #f8f9fb;
	--text: #1f2532;
	--text-muted: #5b6475;
	--border-color: #e5e7eb;
	--shadow-color: 220 30% 7%;
	--focus-ring: 0 0 0 3px rgba(99,102,241,0.4);
	--radius-sm: .5rem;
	--radius-md: 1rem;
	--radius-full: 999px;
	--transition-base: 180ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
	--surface: #1f2430;
	--surface-alt: #242b38;
	--text: #f1f5f9;
	--text-muted: #94a3b8;
	--border-color: #323c4a;
	--shadow-color: 220 40% 2%;
	--gradient-start: #6366f1;
	--gradient-end: #a855f7;
}

html, body { font-family: var(--font-sans); }

body.page-wrapper {
	background: radial-gradient(circle at 20% 20%, #eef2ff, #fdf2f8 40%, #ffffff 75%);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

[data-theme="dark"] body.page-wrapper {
	background: radial-gradient(circle at 20% 20%, #1e1e2a, #1b1f29 60%, #13161d 90%);
}

/* Card */
.profile-card {
	backdrop-filter: blur(10px) saturate(140%);
	background: linear-gradient(145deg, var(--surface) 0%, var(--surface-alt) 100%);
	border-radius: var(--radius-md);
	position: relative;
	isolation: isolate;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.profile-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px -8px hsl(var(--shadow-color) / .35), 0 4px 10px -2px hsl(var(--shadow-color) / .2);
}

.gradient-bar {
	height: 4px;
	background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
	box-shadow: 0 0 0 1px rgba(255,255,255,0.3) inset;
}

/* Avatar */
.avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	background: #fff;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.profile-card:hover .avatar { box-shadow: 0 6px 18px -4px hsl(var(--shadow-color)/.4); }

/* Buttons */
.btn-gradient {
	--bs-btn-color: #fff;
	--bs-btn-border-color: transparent;
	background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
	border-radius: var(--radius-full);
	box-shadow: 0 4px 18px -6px rgba(99,102,241,.6), 0 2px 8px -2px rgba(236,72,153,.4);
	font-weight: 600;
	letter-spacing: .5px;
	position: relative;
	overflow: hidden;
	transition: filter var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-gradient:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,0));
	opacity: 0;
	transition: opacity var(--transition-base);
}

.btn-gradient:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-gradient:hover:before { opacity: 1; }
.btn-gradient:active { transform: translateY(0); }

.social-buttons .btn { border-radius: var(--radius-full); font-weight: 500; }

/* Badges */
.badge { backdrop-filter: blur(4px); }

/* Theme toggle */
.theme-toggle { box-shadow: 0 2px 6px -2px hsl(var(--shadow-color)/.4); }
.theme-toggle .bi { font-size: .9rem; }
.theme-toggle:hover { background: var(--surface-alt); }

/* Utilities */
.letter-space-1 { letter-spacing: .08em; }

/* Focus styles */
:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

/* Transitions */
.btn, .badge, .avatar, .profile-card { transition: all var(--transition-base); }

/* Dark adjustments */
[data-theme="dark"] .profile-card { background: linear-gradient(155deg, #1f2430, #242b38); }
[data-theme="dark"] .btn-gradient { box-shadow: 0 4px 18px -6px rgba(99,102,241,.4), 0 2px 8px -2px rgba(168,85,247,.3); }
[data-theme="dark"] .badge { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }

/* Scrollbar (modern browsers) */
* { scrollbar-width: thin; scrollbar-color: var(--gradient-start) transparent; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gradient-start), var(--gradient-end)); border-radius: 20px; }

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Responsive tweaks */
@media (max-width: 480px) {
	.profile-card { border-radius: 1.25rem; }
	.avatar { width: 110px; height: 110px; }
}