:root {
	color-scheme: light dark;
	interpolate-size: allow-keywords;
	--card: 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

	/* Branding Palette */
	--brand-violet: hsl(281, 100%, 55%);
	--brand-violet-hover: hsl(281, 100%, 45%);
	--brand-violet-tint: light-dark(hsla(281, 100%, 50%, 0.1), hsla(281, 100%, 75%, 0.15));
	--brand-gold: hsl(51, 100%, 50%);

	/* Document Canvas */
	--page-bg: light-dark(hsl(220, 20%, 98%), hsl(220, 20%, 6%));
	--text-main: light-dark(hsl(220, 20%, 10%), hsl(0, 0%, 95%));
	--text-muted: light-dark(hsl(220, 10%, 40%), hsl(220, 10%, 65%));

	/* Glassmorphic Surfaces */
	--glass-bg: light-dark(hsla(0, 0%, 100%, 0.75), hsla(220, 20%, 12%, 0.75));
	--glass-border: 1px solid light-dark(hsla(0, 0%, 0%, 0.08), hsla(0, 0%, 100%, 0.1));
	--card: 0 4px 16px light-dark(hsla(0, 0%, 0%, 0.06), hsla(0, 0%, 0%, 0.4));
	--neu-pressed: inset 0 2px 4px light-dark(hsla(0, 0%, 0%, 0.08), hsla(0, 0%, 0%, 0.4));
	--border: 1px solid light-dark(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 100%, 0.12));
}

/* SVG Global Reset */
svg:not([id]) {
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
	vertical-align: middle;
}

/* Ambient Background Mesh */
bg-mesh {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	filter: blur(100px);
	opacity: light-dark(0.35, 0.18);

	mesh-glow {
		position: absolute;
		border-radius: 50%;

		&.violet-top {
			top: -10vh;
			left: -10vw;
			width: 50vw;
			height: 50vw;
			background: var(--brand-violet);
		}

		&.gold-right {
			top: 25vh;
			right: -10vw;
			width: 35vw;
			height: 35vw;
			background: var(--brand-gold);
		}
	}
}

/* --- 2. Site Header (Unified Across All Pages)                          --- */
site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 1em;
	padding-block: 0.4em;

	position: sticky;
	top: 0;
	z-index: 100;

	border-radius: 0.5em;
	background: light-dark(hsla(0, 0%, 100%, 0.5), hsla(220, 20%, 8%, 0.4));
	backdrop-filter: blur(10px) saturate(140%);
	border-bottom: var(--glass-border);

	brand-logo {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		text-decoration: none;
		color: var(--text-main);

		svg.logo {
			width: 1.5em;
			height: 1.5em;
			fill: var(--brand-violet);
		}

		span {
			font-size: 1.2rem;
			font-weight: 800;
			letter-spacing: -0.02em;
		}
	}

	nav {
		display: flex;
		gap: 2em;

		a {
			text-decoration: none;
			color: var(--text-muted);
			font-size: 0.95rem;
			font-weight: 600;
			transition: color 0.2s ease;

			&:hover,
			&[data-active="true"] {
				color: var(--text-main);
			}
		}
	}

	header-actions {
		display: flex;
		align-items: center;
		gap: 1em;

		button.primary {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding-inline: 1.2em;
			padding-block: 0.5em;
			border-radius: 0.5em;
			background: var(--brand-violet);
			color: hsl(0, 0%, 100%);
			box-shadow: var(--card);
			cursor: pointer;
			scale: 1;
			transition:
				scale 0.2s ease,
				filter 0.2s ease;

			span {
				font-size: 0.9rem;
				font-weight: 700;
				vertical-align: middle;
			}

			&:hover {
				filter: brightness(1.1);
			}
			&:active {
				scale: 0.96;
			}
		}
	}
}

site-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-inline: 2em;
	padding-block: 2em;
	margin-top: 4em;
	border-top: var(--glass-border);
	background: light-dark(hsla(0, 0%, 100%, 0.5), hsla(220, 20%, 5%, 0.5));
	backdrop-filter: blur(1em);

	p {
		margin: 0;
		font-size: 0.8rem;
		color: var(--text-muted);
		line-height: 1.6;
		max-width: 80ch;
	}
}

/* SVG Path Injections for Site Header */
site-header svg.logo path {
	d: path("M12 2L2 22h20L12 2zm0 3.8l7.2 14.4H4.8L12 5.8z");
}