:root {
	/* Core palette: keep existing colors */
	--oxford-blue: #0A1128;
	--federal-blue: #0D1B3E;
	--russian-violet: #3F2E56;
	--light-lavender: #d8d2e8;
	--highlight-blue: #4a4aff;
	--text-primary: #f0f0f5;
	--text-secondary: #a0a8c4;
	--card-bg: rgba(13, 27, 62, 0.4);
	--border-color: rgba(181, 169, 216, 0.15);
	--glow-color: rgba(74, 74, 255, 0.5);
	--border-radius-sm: 10px;
	--border-radius-md: 16px;
	--border-radius-lg: 24px;

	/* Typography scale */
	--font-family-base: 'Cairo', sans-serif;
	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 22px;
	--line-height-base: 1.6;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
}

/* Base reset (light touch) */
html { scroll-behavior: smooth; }
body {
	font-family: var(--font-family-base);
	background-color: var(--oxford-blue);
	color: var(--text-primary);
	margin: 0;
	padding: 0;
}

/* Utilities (non-invasive, opt-in) */
.u-text-muted { color: var(--text-secondary); }
.u-text-primary { color: var(--text-primary); }
.u-bg-card { background: var(--card-bg); }
.u-border { border: 1px solid var(--border-color); }
.u-radius-sm { border-radius: var(--border-radius-sm); }
.u-radius-md { border-radius: var(--border-radius-md); }
.u-radius-lg { border-radius: var(--border-radius-lg); }
.u-shadow-glow { box-shadow: 0 0 20px var(--glow-color); }

/* Buttons (opt-in) */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 700;
	font-size: var(--font-size-md);
	border: 2px solid transparent;
	transition: all 0.3s ease;
}
.btn--primary { background: var(--highlight-blue); color: var(--text-primary); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(74, 74, 255, 0.35); }
.btn--ghost { background: transparent; border-color: var(--russian-violet); color: var(--light-lavender); }
.btn--ghost:hover { background: var(--russian-violet); }

/* Cards (opt-in) */
.card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: var(--space-6);
	backdrop-filter: blur(10px);
}

/* Headings helpers (opt-in) */
.h-section {
	font-weight: 800;
	color: var(--text-primary);
	position: relative;
	padding-bottom: var(--space-3);
}
.h-section::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, var(--highlight-blue), var(--russian-violet));
	border-radius: 2px;
}