/*
 *	====================
 *	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) 50%, transparent);
	text-shadow: none;
}



/*
 * 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);
	font-size: var(--p);
	line-height: 1.375;
	font-weight: 400;
	/* 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;
}

/*
	Reference Base Type Scale :
	Element:		h1		h2		h3		h4		h5		h6		p		label	small
	Font Size:		4.8rem	4.0rem	3.2rem	2.6rem	2.0rem	1.6rem	1.4rem	1.2rem	1.0rem
	Line Height:	1.15	1.2		1.25	1.3		1.35	1.4		1.5		1.5		1.5
*/

h1 { font-size: var(--h1); line-height: 1.15; }
h2 { font-size: var(--h2); line-height: 1.2; }
h3 { font-size: var(--h3); line-height: 1.25; }
h4 { font-size: var(--h4); line-height: 1.3; }
h5 { font-size: var(--h5); line-height: 1.35; }
h6 { font-size: var(--h6); line-height: 1.4; }
p { font-size: var(--p); line-height: 1.5; }
label { font-size: var(--label); line-height: 1.5; }
small { font-size: var(--small); line-height: 1.5; }

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



/* -- Lists -- */

ul { list-style: disc inside; }
ol {ist-style: decimal inside; }
ul, ol, 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(0.85);
}



/* -- Misc -- */

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

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

table {
	width: 100%;
}

th, td {
	padding: var(--p) var(--p);
	text-align: left;
	border-bottom: var(--border-width) solid var(--hue-dark);
}