/* Axion IDE: a printed code listing. Cream paper, black ink, one green. Mono headings, serif text, square corners, hard shadows. */

:root:has(.page) {
	color-scheme: light;
	--background: #f3eee0;
	--surface: #faf6ea;
	--surface-hover: #ebe5d3;
	--sunken: #ebe5d3;
	--line: #cfc7b0;
	--line-strong: #1d1d1b;
	--text: #1d1d1b;
	--muted: #4a4a42;
	--subtle: #77745f;
	--on-primary: #f3eee0;
	--accent: #0b6e4f;
	--radius: 0;
	--colour-text: #1d1d1b;
	--colour-line: #cfc7b0;
	--navbar-background-colour: #f3eee0;
	--navbar-text-colour: #1d1d1b;
	--onhover-background-colour: #1d1d1b;
	--onhover-text-colour: #f3eee0;
	--onactive-text-colour: #f3eee0;
	--onclick-background-colour: #0b6e4f;
	--onclick-text-colour: #f3eee0;
	--bs-body-bg: #f3eee0;
	--bs-body-color: #1d1d1b;
}

.page {
	background: var(--background);
	color: var(--text);
	font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	font-size: 1.05rem;
}

::selection {
	background: var(--accent);
	color: var(--on-primary);
}

.page h1,
.page h2,
.page h3,
.page .eyebrow,
.page .menu-brand h1,
.page .main-nav a,
.page main a.button,
.page .badge,
.page footer.site-footer {
	font-family: var(--mono);
}

/* The bar at the top: a ruled line, entries that turn to ink when touched */
.page .main-nav {
	border-bottom: 2px solid var(--text);
}

.page .main-nav a {
	border-radius: 0;
	font-size: 0.9rem;
}

.page .main-nav a.active {
	box-shadow: none;
	background: var(--text);
	color: var(--background);
	border-radius: 0;
}

.page .menu-brand h1 {
	font-size: 1rem;
	letter-spacing: -0.02em;
}

.page .menu-brand h1::before {
	content: "$ ";
	color: var(--accent);
}

/* Headings and the small links next to them keep the colours of the theme */
.page h1,
.page h2,
.page h3 {
	color: var(--text);
}

.page .section-head a,
.page a.more {
	color: var(--accent);
}

/* Headings */
.page h2 {
	border-bottom: 1px solid var(--text);
	letter-spacing: -0.02em;
}

.hero h1 {
	font-size: clamp(2rem, 6vw, 3.4rem);
	letter-spacing: -0.04em;
}

.hero h1::before {
	content: "> ";
	color: var(--accent);
}

.eyebrow {
	color: var(--accent);
	font-size: 0.8rem;
}

.eyebrow::before {
	content: "// ";
}

/* Links and lists in the text */
.prose a,
.lead a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose ul {
	list-style: none;
	padding-left: 1.4rem;
}

.prose ul li::before {
	content: "- ";
	margin-left: -1.1rem;
	color: var(--accent);
	font-family: var(--mono);
}

/* Buttons: a solid block, the main one in ink, the other one framed */
.page main a.button,
.page main a.button:visited {
	border: 2px solid var(--text);
	border-radius: 0;
	background: var(--text);
	color: var(--background);
	font-size: 0.9rem;
}

.page main a.button:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-primary);
}

.page main a.button.secondary,
.page main a.button.secondary:visited {
	background: transparent;
	color: var(--text);
}

.page main a.button.secondary:hover {
	background: var(--text);
	border-color: var(--text);
	color: var(--background);
}

/* Cards and boxes: square, with a hard offset shadow like a print */
.page .project-card,
.page .banner,
.page .download-card,
.page .gallery img {
	border: 1px solid var(--text);
	border-radius: 0;
}

.page .project-card:hover {
	border-color: var(--text);
	box-shadow: 5px 5px 0 var(--text);
}

.page .banner {
	box-shadow: 5px 5px 0 var(--text);
}

.page .badge {
	border-radius: 0;
}

.page footer.site-footer {
	border-top: 2px solid var(--text);
	font-size: 0.8rem;
}

/* The search box */
.page .menu-search input {
	border: 1px solid var(--text);
	border-radius: 0;
	background: var(--surface);
	font-family: var(--mono);
}