/*
 *	====================
 *	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-secondary);
}


/* Input Placeholder Text - Modern Browsers */
::placeholder {
  color: inherit;
  opacity: 0.5;
}



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

html {
	--hue-foreground: var(--hue-mono-100);
	--hue-background: var(--hue-mono-0);

	/* This makes 1rem = 10px, a classic and useful trick. */
	font-size: 62.5%;
}

body {
	background-color: var(--hue-background);
	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-foreground);
}



/*
 * 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-foreground);
}

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-background);
	background-color: var(--hue-primary);
	cursor: pointer;
}

.button:hover,
button:hover {
	filter: brightness(1.25);
}



/* -- Misc -- */

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

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-foreground);
}