/* dev.css v6, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
/* about: tiny, simple, classless CSS framework inspired by new.css */

/**
MIT License

Copyright (c) 2024 devin

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/

/* table of contents
	1. configurable variables
	2. typography
	3. document
	4. blockquotes
	5. buttons and inputs
	6. code and keyboards
	7. details
	8. description lists
	9. horizontal rules
	10. fieldsets
	11. tables
	12. lists
	13. media
*/

/* 1. configurable variables */
/* adjustable by you! see ./theme/boilerplate.user.css */
:root {
	/* font families */
	--dc-font: ui-sans-serif, system-ui, sans-serif;
	--dc-font-mono: ui-monospace, monospace;

	/* light/dark colors */
	color-scheme: light;
    --dc-tx-1: #1c1914;      /* headings: 17.1:1 / 15.5:1 */
    --dc-tx-2: #33302a;      /* body text: 12.8:1 / 11.6:1 (AAA) */
    --dc-bg-1: #fdfcf8;      /* article & input surfaces */
    --dc-bg-2: #f4f1e8;      /* page, code blocks, table stripes */
    --dc-bg-3: #8d867a;      /* borders: ≥3.2:1 vs both surfaces */
    --dc-lk: #1e6a52;        /* links: 6.3:1 / 5.7:1 */
    --dc-btn: #1e6a52;       /* white text on it: 6.5:1 */
    --dc-btn-hover: #155843; /* white text on it: 8.4:1 */
    --dc-btn-tx: #ffffff;
    --dc-ac: #8a3d12;        /* mark bg (white text: 7.6:1), form accents */

	/* layout */
	--dc-width: 48rem; /* max width */
}

/* 2. typography */

p {
	overflow-wrap: break-word;
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
	text-wrap: balance;
	color: var(--dc-tx-1);
}

h1,
h2,
h3 {
	padding-block-end: 0.125rem;
	border-block-end: 1px solid var(--dc-bg-3);
	line-height: 1;
}

a {
	color: var(--dc-lk);
}

mark {
	border-radius: 0.375rem;
	padding: 0.125rem 0.25rem;
	background: var(--dc-ac);
	color: var(--dc-btn-tx);
}

code,
pre,
kbd,
samp {
	font-family: var(--dc-font-mono);
	font-size: 0.875rem;
}

/* 3. document */
body {
	font-family: var(--dc-font);
	color: var(--dc-tx-2);
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: var(--dc-width);
	margin: 0 auto;
	padding: 1rem;
	background: var(--dc-bg-2);
	overflow-x: hidden;
}

header * {
	padding: 0;
	margin: 0;
}

header > *:not(:last-child) {
	margin-block-end: 0.25rem;
}

header h1,
header h2,
header h3 {
	border-block-end: none;
}

header nav ul,
footer nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}

header nav ul li,
footer nav ul li {
	margin: 0;
	display: flex;
	align-items: center;
}

header nav ul li:not(:first-child)::before,
footer nav ul li:not(:first-child)::before {
	content: "•";
	margin: 0 0.25em;
}

aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

main,
body > article,
aside article {
	padding-inline: 1.5rem;
	background: var(--dc-bg-1);
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.375rem;
}

main article {
	margin-block: 1rem;
	padding-inline: 1.5rem;
	background: var(--dc-bg-2);
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.375rem;
}

article h1,
article h2,
article h3 {
	border-block-end: none;
}

aside article details {
	margin-block: 1rem;
}

@media (max-width: 48rem) {
	main {
		margin-inline: -1rem;
		background: none;
		border: none;
	}

	main article,
	aside article,
	main code,
	main samp,
	main kbd,
	main pre,
	main blockquote,
	main details:not(aside details) {
		background: var(--dc-bg-1);
	}

	main tr:nth-child(even),
	main th {
		background: var(--dc-bg-1);
	}

	main,
	body > article,
	aside article,
	main article {
		padding-inline: 1rem;
	}
}

@media (min-width: 82rem) {
	body:has(main):has(aside) {
		display: grid;
		grid-template-columns: minmax(0, 16rem) minmax(0, var(--dc-width)) minmax(
				0,
				16rem
			);
		grid-template-areas:
			". header ."
			"aside-l main aside-r"
			". footer .";
		max-width: 80rem;
	}

	body:has(main):has(aside) header {
		grid-area: header;
	}
	body:has(main):has(aside) main {
		grid-area: main;
	}
	body:has(main):has(aside) aside:nth-of-type(1) {
		grid-area: aside-l;
	}
	body:has(main):has(aside) aside:nth-of-type(2) {
		grid-area: aside-r;
	}
	body:has(main):has(aside) footer {
		grid-area: footer;
	}
}

/* 4. blockquotes */
blockquote {
	padding: 1rem;
	margin-inline: 0;
	background: var(--dc-bg-2);
	border: 1px solid var(--dc-bg-3);
	border-inline-start: 5px solid var(--dc-bg-3);
	border-radius: 0.375rem;
}

/* 5. buttons and inputs */
input,
button,
textarea,
select {
	font: inherit;
}

button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	padding: 0.25rem 0.75rem;
	text-align: center;
	text-decoration: none;
	background: var(--dc-btn);
	color: var(--dc-btn-tx);
	border: 0;
	border-radius: 0.375rem;
	cursor: pointer;
}

button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

:is(
	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"]
):is(:focus, :enabled:hover) {
	background: var(--dc-btn-hover);
}

textarea,
select,
input {
	padding: 0.25rem 0.5rem;
	background: var(--dc-bg-2);
	color: var(--dc-tx-2);
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.375rem;
	box-shadow: none;
	box-sizing: border-box;
}

textarea {
	max-width: 100%;
}

input,
progress {
	accent-color: var(--dc-ac);
}

/* 6. code and keyboards */
code,
samp,
kbd,
pre {
	background: var(--dc-bg-2);
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.375rem;
	padding: 0.125rem 0.25rem;
	tab-size: 4;
}

kbd {
	border-block-end: 3px solid var(--dc-bg-3);
}

pre {
	padding: 1rem;
	max-width: 100%;
	overflow: auto;
}

pre code {
	padding: 0;
	border: 0;
}

/* 7. details */
details:not(aside details) {
	margin-block: 1rem;
	padding: 1rem 1.5rem;
	background: var(--dc-bg-2);
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.375rem;
}

summary {
	cursor: pointer;
	font-weight: bold;
}

details[open] > :last-child {
	margin-block-end: 0;
}

/* 8. description lists */
dt {
	font-weight: bold;
}

dd::before {
	content: "→ ";
}

/* 9. horizontal rules */
hr {
	border: 0;
	border-block-end: 2px solid var(--dc-bg-3);
}

/* 10. fieldsets */
fieldset {
	padding: 1rem;
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.375rem;
}

legend {
	padding-inline: 0.5rem;
}

/* 11. tables */
table {
	border-collapse: collapse;
	width: 100%;
}

td,
th {
	border: 1px solid var(--dc-bg-3);
	text-align: left;
	padding: 0.5rem;
}

th {
	background: var(--dc-bg-2);
}

tr:nth-child(even) {
	background: var(--dc-bg-2);
}

table caption {
	font-weight: bold;
}

/* 12. lists */
ol,
ul {
	padding-inline-start: 2rem;
}

li {
	margin-block-start: 0.375rem;
}

/* 13. media */
img,
picture,
video,
canvas,
svg {
	max-width: 100%;
	height: auto;
}