/*
 *	====================
 *	2-base.css — The foundational layer after the reset.
 *	====================
 */



/*
 * Selection Styling - Provides a pleasant or bold, consistent text selection color.
 */

::selection {
	background: color-mix(in srgb, var(--hue-primary) 85%, transparent);
	text-shadow: none;
	color: var(--hue-light);
}



/*
 * Base Document Styles
 * Sets the REM base and default font styles for the whole document.
 */

html {
	/* This makes 1rem = 10px, a classic and useful trick. */
	font-size: 62.5%;
}
body {
	background-color: var(--hue-light);
	/* A modern system font stack for better cross-platform rendering. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	color: var(--hue-dark);
}



/*
 * Typography
 * Restores basic heading styles and link visibility.
 */

h1, h2, h3, h4, h5, h6 {
	font-weight: inherit;
}

a {
	color: var(--hue-primary);
	text-decoration: underline; /* Makes links obviously clickable by default. */
}



/* -- Lists -- */

ul { 
	list-style: disc outside;
}
ol { 
	list-style: decimal-leading-zero inside;
}
ul li { margin-left: var(--p); }


/* -- Inputs -- */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select {
	width: 100%;
	height: calc(var(--p) * 3);
	padding: var(--p);
	font-size: var(--p);
	line-height: 1.5;
	border: var(--border-width) solid var(--hue-dark);
}
select {
	padding: calc((var(--p) / 2) - var(--border-width)) var(--p);
	line-height: 2;
}
textarea {
	padding: calc((var(--p) / 1.333) - var(--border-width)) var(--p);
	min-height: calc(var(--p) * 6);
	resize: vertical; /* Allow only vertical resizing. */
}
input[type="checkbox"],
input[type="radio"] {
	/* Restores the basic appearance of a checkbox/radio. */
	-webkit-appearance: revert;
	appearance: revert;
}



/* -- Button -- */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	height: calc(var(--p) * 3);
	padding: 0 var(--p);
	text-align: center;
	font-size: var(--label);
	font-weight: 400;
	line-height: calc(var(--p) * 3);
	text-decoration: none;
	white-space: nowrap;
	/*color: var(--hue-light);*/
	/*background-color: var(--hue-primary);*/
	cursor: pointer;
}
.button:hover, button:hover {
	filter: brightness(106%) contrast(125%);;
}



/* -- Misc -- */

hr {
	border: 0;
	border-top: var(--border-width) solid var(--hue-dark);
}

img {
	max-width: 100%;
	height: auto;
}

table {
	width: 100%;
}

th { font-weight: 700; }

th, td {
	padding: var(--space-25) var(--space-25);
	text-align: left;
	border: var(--border-width) solid var(--hue-neutral-30);
}