/* Shared design tokens and elements for dustin-burke.com */

:root {
	--text-muted: hsl(214, 38%, 79%);
	--link-muted: hsl(214, 20%, 60%);
	/* Tell the browser the canvas is dark so the very first paint (and the
	   default scrollbar/canvas) is dark rather than white. */
	color-scheme: dark;
}

/* Solid black on both the root AND the body — always present, painted before
   any page content, so there is no transparent layer anywhere for the browser's
   white default canvas to show through during navigation. Page decoration (the
   home gif, the blog gradient + fingerprint) and content all sit above this on
   positive z-index layers. */
html,
body {
	background-color: #000;
}

/* Seamless cross-fade between pages (View Transitions API, multi-page). */
@view-transition {
	navigation: auto;
}

/* Keep the cross-fade itself on a black backdrop so no white shows through
   while the old/new page snapshots overlap. */
::view-transition {
	background-color: #000;
}

/* Snappy, smooth cross-fade — short duration with an ease-out curve. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.18s;
	animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

body {
	margin: 0;
	padding: 0;
	font-family: Inter, "Open Sans", Roboto, sans-serif;
}

/* The "Dustin Burke" wordmark — identical on the home hero and the blog header. */
.wordmark {
	font-size: 4rem;
	font-weight: lighter;
	color: white;
	text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
	font-family: Inter, "Open Sans", Roboto, sans-serif;
}

/* Icon + label links shared by the home overlay and the blog nav. Devicon
   glyphs (<i>) and inline SVGs (home / blog) are styled to look identical, and
   the label sits beside the icon, sized to match it. */
.links a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--text-muted);
	font-size: 1.35rem;
	font-weight: 300;
	transition: color 0.3s ease;
}

.links a:hover {
	color: white;
}

.links a i,
.links a svg {
	transition: color 0.3s ease;
	font-size: 2rem;
	width: 2rem;
	height: 2rem;
	color: inherit;
	fill: currentColor;
}

/* Outline icons (e.g. the brain) draw with a stroke instead of a fill. */
.links a svg.icon-stroke,
.breadcrumb svg.icon-stroke {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}