:root {
	--logo-img-light: url('../img/journey-logo-light.png');
	--logo-img-dark: url('../img/journey-logo-dark.png');
	--border-header-light: var(--border-thin) solid var(--c-purple-300-25);
	--border-header-dark: var(--border-thin) solid var(--c-bg-darken);
	--baseline-blank: rgba(0,0,0,0);
	--baseline-color: rgba(0,0,0,0.2);
	
	--logo-img: var(--logo-img-light);
	--bg-header: light-dark(var(--c-purple-300-10),var(--c-bg-shade));
	--border-header: light-dark(var(--border-header-light),var(--border-header-dark));
}

/* -----------------------------------------------
	Layout
----------------------------------------------- */

.page {
	display: grid;
	grid-template-rows: fit-content(10rem) 1fr fit-content(3rem);
	min-height: 100%;
}

.page > header {
	padding: var(--space-m) 0 0;
}
header .site-title {
	background-image: var(--logo-img);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 var(--space-m) var(--space-m);
	padding-left: clamp(4.5rem, calc(3.9783rem + 2.6087vw), 6rem);
}
header h1 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	margin-bottom: 0;
}
.site-title .subtitle {
	letter-spacing: 1px;
	margin: -0.5rem 0 0;
	text-transform: uppercase;
}

nav ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem,1fr));
	list-style: none;
	margin: 0;
}
nav ul a:link, nav ul a:visited {
	box-shadow: inset 0 calc(-1*var(--space-3xs)) 0 var(--c-bg-accent);
	display: block;
	padding: var(--space-s) var(--space-2xs);
	text-align: center;
	text-decoration: none;
	
}
nav li a[data-state="active"] {
	font-weight: 700;
	position: relative;
	transition: none;
}
nav li a[data-state="active"]::after {
	box-shadow: inset 0 calc(-1*var(--space-2xs)) 0 var(--c-bg-selected);
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	view-transition-name: header-nav;
}
nav ul a:hover, nav ul a:focus {
	box-shadow: inset 0 calc(-1*var(--space-3xl)) 0 var(--c-bg-selected);
	color: var(--c-reverse);
	transition: all var(--transition-med) var(--transition-inout);
}
main {
	display: grid;
}
.sidebar {
	background: var(--c-bg-accent);
	font-size: var(--font-size-small);
	padding: var(--space-m) var(--space-none);
}
main .sidebar ul {
	list-style: none;
	margin: var(--space-none);
}
.sidebar ul a {
	border-left: var(--space-2xs) solid transparent;
	display: block;
	padding: var(--space-2xs) var(--space-m);
	text-decoration: none;
	transition: all var(--transition-fast) var(--transition-inout);
}
.sidebar ul a:hover, .sidebar ul a:focus, .sidebar a[data-state="active"] {
	background: var(--c-bg-accent);
	border-color: var(--c-bg-selected);
	color: var(--c-text);
}
.sidebar a[data-state="active"] {
	font-weight: bold;
}
.sidebar a.active {
	font-weight: 700;
}
.sidebar li ul a {
	padding-left: var(--space-xl);
}
.sidebar > ul > li > a[data-state="active"] {
	background: var(--c-bg-selected);
	color: var(--c-reverse);
	font-weight: 900;
}
.sidebar > ul > li > a[data-state="active"]:hover {
	background: var(--c-bg-selected-hover);
	border-color: var(--c-bg-selected-hover);
}

article {
	max-width: 100vw;
	padding: var(--space-l);
}
article header {
	background: var(--bg-header);
	border-bottom: var(--border-header);
	margin: calc(-1 * var(--space-l)) calc(-1 * var(--space-l)) var(--space-l);
	padding: var(--space-3xl) var(--space-l);
}
article header h2 {
	margin-bottom: var(--space-3xs);
}
article header .subtitle {
	
}
footer {
	background: var(--c-bg-shade);
	border-top: var(--space-single) solid var(--c-bg-darken);
	font-size: var(--font-size-small);
	padding: var(--space-l);
}

.page-list {
	display: grid;
	gap: var(--space-l);
	grid-auto-rows: 1fr;
	grid-template-columns: 1fr;
}
.page-list li {
	display: block;
	height: 100%;
}
.page-list a {
	background: var(--c-bg-card);
	border: var(--border-thin) solid var(--c-border-card);
	border-radius: var(--radius-s);
	display: block;
	height: 100%;
	padding: var(--space-xl) var(--space-l);
	text-decoration: none;
	transition: all var(--transition-fast) var(--transition-bounce);
	width: 100%;
}
.page-list a:hover, .page-list a:focus {
	background: var(--c-bg-card-hover);
	border-color: var(--c-border-card-hover);
	box-shadow: var(--shadow-moderate);
	color: var(--c-text);
	transform: translateY(calc(-1 * var(--space-2xs)));
}
.page-list a .title {
	font-size: var(--font-size-large);
	font-weight: var(--font-weight-semibold);
}
.page-list a .summary {
	color: var(--c-text);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	opacity: var(--opacity-75);
}

.page-meta {
	font-size: var(--font-size-tiny);
	font-style: italic;
	margin: var(--space-l) 0 0;
	opacity: var(--opacity-75);
}

.update-list li {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: 1fr 3fr;
}
.summary {
	font-size: var(--font-size-small);
	opacity: var(--opacity-75);
}

/* -----------------------------------------------
	Color Swatches
----------------------------------------------- */

.palette h4 {
	margin-bottom: 0;
}
.color-set {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: 1fr;
	margin: var(--space-l) 0 var(--space-3xl);
}
.swatches {
	display: grid;
	gap: var(--space-none);
	grid-auto-flow: row;
	grid-template-rows: repeat(auto-fill, 1fr);
}
.swatch a {
	display: block;
	font-size: var(--font-size-small);
	padding: var(--space-xs);
	text-decoration: none;
}
.swatch a:hover, .swatch a:focus {
	position: relative;
	transform: scale(1.04);
	transition: all var(--transition-med) var(--transition-bounce);
	z-index: 2;
}
.swatch a::before {
	content: attr(data-copy);
	display: inline-block;
}
.swatch a.light {
	color: var(--c-neutral-black-100);
}
.swatch a.light:not(.sheer)::after {
	filter: invert(0%);
}
.swatch a.dark {
	color: var(--c-neutral-white-100);
}
.swatch a.dark::after {
	filter: invert(100%);
}

/* -----------------------------------------------
	Design Tokens
----------------------------------------------- */

.token-set {
	margin: var(--space-l) 0 var(--space-4xl);
}
.token-set tr {
	align-items: center;
	display: grid;
}
.token-set button.subtle {
	margin-left: calc(-1 * var(--space-m));
}
.semantic-color tr th:first-child, .semantic-color tr td:first-child {
	grid-area: token;
}
.semantic-color tr th:nth-child(2), .semantic-color tr td:nth-child(2) {
	grid-area: desc;
}
.semantic-color tr th:nth-child(3), .semantic-color tr td:nth-child(3) {
	grid-area: light;
}
.semantic-color tr th:nth-child(4), .semantic-color tr td:nth-child(4) {
	grid-area: dark;
}
.token-sample-border, .token-sample-box, .token-sample-space {
	background: var(--c-secondary);
}
.token-sample-border {
	background: var(--c-secondary);
	height: var(--space-xl);
	width: var(--space-4xl);
}
.token-sample-box {
	height: var(--space-xl);
	width: 100%;
}
.token-sample-color {
	border: var(--border-med) solid var(--c-bg-contrast);
	max-height: 100%;
	min-height: var(--space-2xl);
	width: 100%;
}
.token-sample-type {
	font-family: var(--f-sans);
	font-size: var(--font-size-large);
	font-weight: var(--weight-reg);
}
.token-sample-lh {
	box-shadow: inset 0 2px 0 var(--c-secondary),
							inset 0 -2px 0 var(--c-secondary);
	overflow: hidden;
}

/* -----------------------------------------------
	Grid
----------------------------------------------- */

.grid-example h5 {
	margin-bottom: 0;
}
.grid-sample {
	margin: var(--space-m) var(--space-none) var(--space-2xl);
}
.grid-sample.no-gap > div {
	border: var(--border-thin) solid var(--c-bg-shade);
}
.grid-sample > div {
	background: var(--c-secondary);
	border-radius: var(--radius-s);
	min-height: var(--space-2xl);
}
.grid-sample .grid-sample {
	margin: 0;
}
.grid-sample .grid-sample > div {
	background: var(--c-bg-contrast);
	border: var(--border-thin) solid var(--c-text);
}

/* -----------------------------------------------
	Icons
----------------------------------------------- */

.icon-list, .icon-size-list {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: 1fr;
}
.icon-list li {
	display: grid;
	gap: var(--space-s);
}
.icon-size-list > li {
	align-content: center;
	align-items: center;
	display: grid;
	grid-template-columns: 120px 1fr;
}
.icon-list button.subtle, .icon-size-list button.subtle {
	margin-left: calc(-1 * var(--space-m));
}
.icon-list .icon {
	padding: var(--space-2xs) 15%;
}
.icon-size-list svg {
	display: block;
	margin: 0 auto;
}

/* -----------------------------------------------
	Type
----------------------------------------------- */

.font-stack {
	margin: 0 0 var(--space-2xl);
}
.font-stack li {
	display: grid;
	gap: var(--space-m);
	grid-template-rows: auto auto 1fr;
}
.font-stack h5 {
	margin-bottom: 0;
}

/* -----------------------------------------------
	Components
----------------------------------------------- */

.sample-component {
	border-color: var(--c-bg-accent);
	border-style: solid;
	border-width: var(--border-med) var(--border-med) var(--border-none);
	box-shadow: inset 0 0 var(--space-s) var(--c-bg-shade);
	padding: var(--space-l);
}

/* -----------------------------------------------
	Utility
----------------------------------------------- */

.baseline {
	background-image: linear-gradient(to bottom, var(--baseline-blank) 0 90%, var(--baseline-color) 90% 100%);
	background-position: top center;
	background-repeat: repeat;
	-webkit-background-size: 100% var(--space-xs);
	-o-background-size: 100% var(--space-xs);
	background-size: 100% var(--space-xs);
	padding: var(--space-l);
}
.baseline > * {
	box-shadow: inset 0 1px 0 var(--c-link),
		inset 0 -1px 0 var(--c-link);
}
.header-anchor {
	font-family: var(--f-sans);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-body);
	opacity: var(--opacity-75);
}
.header-anchor:hover, .header-anchor:focus {
	opacity: var(--opacity-100);
}
body.dark {
	color-scheme: dark;
	
	--baseline-blank: rgba(255,255,255,0);
	--baseline-color: rgba(255,255,255,0.2);
}
body.dark header .site-title {
	--logo-img: var(--logo-img-dark);
}
body.dark .swatch a.light.sheer {
	color: var(--c-neutral-white-100);
}
body.dark .black-alpha {
	background: var(--c-blue-300);
}
.black-alpha, .white-alpha {
	border-radius: var(--radius-s);
	margin: calc(-1 * var(--space-xs));
	padding: var(--space-xs);
}

/* -----------------------------------------------
	MEDIA QUERIES
---------------------------------------------- */

@media screen and (max-width: 31.95rem) {
	.sidebar {
		border-bottom: var(--border-thin) solid var(--c-bg-contrast);
	}
	.token-set tr {
		gap: 0;
		grid-template-columns: 1fr;
		padding: var(--space-s) 0;
	}
	.semantic-color tr {
		grid-template-areas: "token	token"
												 "desc desc"
												 "light dark";
		grid-template-columns: 1fr 1fr;
		row-gap: 0;
	}
	.semantic-color tr td:nth-child(3) {
		padding-right: var(--space-s);
	}
	.semantic-color tr td:nth-child(4) {
		padding-left: var(--space-s);
	}
	.token-set th, .token-set td {
		padding: var(--space-xs) 0;
	}
	.icon-list {
		gap: var(--space-s);
	}
	.icon-list li {
		grid-template-columns: 1fr 5fr;
	}
}

@media screen and (min-width: 32rem) {
	.icon-list li {
		grid-template-columns: 1fr 3fr;
	}
}

@media screen and (min-width: 32rem) and (max-width: 39.95rem) {
	.icon-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 40rem) {
	html, body {
		height: 100%;
	}
	main {
		grid-template-columns: 1fr 3fr;
	}
	.sidebar {
		border-right: var(--border-thin) solid var(--c-bg-contrast);
	}
	.page-list, .color-set, .icon-list {
		grid-template-columns: repeat(2,1fr);
	}
}

@media screen and (min-width: 32rem) and (max-width: 49.95rem) {
	nav ul {
		grid-template-columns: repeat(3, minmax(8rem,1fr));
	}
	.semantic-color tr {
		grid-template-areas: "token light dark"
												 "desc light dark";
		grid-template-columns: 4fr 1fr 1fr;
		row-gap: 0;
	}
	.semantic-color tr td:nth-child(1) {
		padding: var(--space-xs) 0 0;
	}
	.semantic-color tr td:nth-child(2) {
		padding: 0 0 var(--space-xs);
	}
}

@media screen and (min-width: 50rem) {
	.semantic-color tr {
		grid-template-areas: "token	desc light dark";
		grid-template-columns: 2fr 2fr 1fr 1fr;
	}
	.update-list li {
		grid-template-columns: 1fr 5fr;
	}
}

@media screen and (min-width: 60rem) {
	main {
		grid-template-columns: 1fr 5fr;
	}
	.page-list, .color-set {
		grid-template-columns: repeat(3,1fr);
	}
	.icon-list {
		grid-template-columns: repeat(3, 1fr);
	}
	.icon-list li {
		grid-template-columns: 1fr 4fr;
	}
	.update-list li {
		grid-template-columns: 1fr 7fr;
	}
}

@media screen and (prefers-color-scheme: light) {
	.swatch a.dark.sheer {
		color: var(--c-neutral-black-100);
	}
	.white-alpha {
		background: var(--c-blue-300);
	}
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--baseline-blank: rgba(255,255,255,0);
		--baseline-color: rgba(255,255,255,0.2);
	}
	header .site-title {
		--logo-img: var(--logo-img-dark);
	}
	.swatch a.light.sheer {
		color: var(--c-neutral-white-100);
	}
	.black-alpha {
		background: var(--c-blue-300);
	}
}