@import 'global/reset.css';
@import 'global/fonts.css';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Staatliches&display=swap');

/* COMPOSITION */
@import 'compositions/flow.css';
@import 'compositions/cluster.css';
@import 'compositions/grid.css';

/* UTILITY */
@import 'utilities/visually-hidden.css';
@import 'utilities/block.css';

/* BLOCK/EXCEPTION */
@import 'blocks/wrapper.css';
@import 'blocks/site-header.css';
@import 'blocks/site-footer.css';
@import 'blocks/marquee.css';

:root {
	--text-color-dark: black;
	--text-color-light: white;

	--color-dark: black;
	--color-light: white;

	--font-base: "Noto Sans", sans-serif;
	--font-special: "Staatliches", sans-serif;

	--gutter: var(--space-m);
	--transition-base: 250ms ease;
	--transition-movement: 200ms linear;
	--transition-fade: 300ms ease;
	--tansition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
	--stroke: 4px dashed var(--text-color-dark);
	--stroke-solid: 4px solid var(--text-color-dark);
	--uppercase-kerning: 0.04ch;

	--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
	--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
	--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
	--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
	--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
	--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
	--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
	--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

	--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
	--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
	--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
	--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
	--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
	--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
	--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
	--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
	--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

	/* One-up pairs */
	--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
	--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
	--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
	--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
	--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
	--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
	--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
	--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

	/* Custom pairs */
	--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
}

h1,
h2,
h3,
h4,
h5,
.faux-heading-2 {
	font-family: var(--font-special);
	font-weight: 400;
	font-style: normal;
}

body {
	background: var(--color-light);
	color: var(--color-dark);
	font-size: var(--step-0);
	font-family: var(--font-base);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
		"wdth" 100;
	line-height: var(--leading-standard);
	font-size-adjust: from-font;
	margin: 0;
}

:is(h1, h2, h3, h4) {
	line-height: var(--leading-fine);
	text-wrap: balance;
}

h1 {
	font-size: var(--step-5);
	max-width: 20ch;
}

h2,
.faux-heading-2 {
	font-size: var(--step-4);
	max-width: 35ch;
}

h3 {
	font-size: var(--step-3);
	max-width: 35ch;
}

:is(h3, h5, h6) {
	font-size: var(--step-2);
}

small {
	font-size: var(--size-step-0);
}

ins {
	text-decoration: none;
	background: var(--color-dark);
	color: var(--color-light);
	padding-inline: 0.3em;
}

:is(code, kdb, samp) {
	font-family: var(--font-mono);
	padding: 0.2em 0.2em 0.05em 0.2em;
	hyphens: none;
	tab-size: 2;
	text-align: left;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	box-decoration-break: clone;
}

@supports not (font-size-adjust: from-font) {
	:is(code, kbd, samp) {
		font-size: 0.8em;
	}
}

pre:has(code) {
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

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

kbd {
	border: 1px solid;
	padding-block-end: 0.1em;
}

var {
	font-style: normal;
	font-weight: var(--font-medium);
}

q {
	font-style: itallic;
}

ul:not([class]) {
	padding-inline-start: 1.7ch;
	list-style-type: disc;
}

ul:not([class])>li {
	padding-inline-start: var(--space-xs);
}

:is(ol, ul):not([class]) li+* {
	margin-block-start: var(--flow-space, var(--space-xs));
}

ul ::marker {
	font-size: 0.8lh;
}

ol ::marker {
	font-size: 1em;
	font-weight: var(--font-bold);
}

[role='list'][class],
[role='tablist'][class] {
	margin-block: 0;
	padding: 0;
}

dt {
	font-weight: var(--font-medium);
}

dt+dd {
	margin-block-start: var(--space-xs);
}

dd+dt {
	margin-block-start: var(--space-s);
}

dd {
	margin-inline-start: 1.5ch;
}

blockquote {
	margin-inline: 0;
	color: var(--color-light);
}

blockquote footer {
	margin-block-start: var(--space-s);
	color: var(--color-primary);
	font-size: var(--size-step-0);
}

blockquote q {
	font-style: normal;
}

:is(video, iframe[src*='youtube'], iframe[src*='vimeo']) {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}

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

figcaption {
	padding-block-start: 0.5em;
	font-size: var(--size-step-0);
	font-family: monospace;
}

table {
	border: var(--stroke);
	border-collapse: collapse;
	width: 100%;
}

th {
	text-align: left;
	font-weight: var(--font-bold);
	line-height: var(--leading-fine);
}

thead th {
	padding-block: var(--space-s);
}

td,
th {
	padding: var(--space-xs) var(--space-s);
}

th:not(:only-of-type) {
	border-block-end: var(--stroke);
}

th:only-of-type {
	border-inline-end: var(--stroke);
}

:is(th, td)~ :is(th, td) {
	border-inline-start: var(--stroke);
}

tr+tr :is(th, td) {
	border-block-start: var(--stroke);
}

caption {
	caption-side: bottom;
	margin-block-start: var(--space-s);
}

a:not([class]):hover {
	text-underline-offset: 0.2lh;
}

:is(h1, h2, h3, h4) a:not([class]) {
	text-decoration-thickness: 0.1ex;
	text-underline-offset: 0.2ex;
}

:is(h1, h2, h3, h4) a:not([class]):hover {
	text-underline-offset: 0.3ex;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--focus-color, currentColor);
	outline-offset: var(--focus-offset, 0.2lh);
}

/* Firefox is the only browser that doesn't outline the whole element unless you make it display: inline-block. That in itself causes multiple flow issues so we can detect it, using its own vendor prefix and reduce focus offset
*/
@supports (-moz-appearance: none) {
	:root {
		--focus-offset: 0.08em;
	}
}

:target {
	scroll-margin-block: 5lh;
}

::selection {
	color: var(--color-light);
	background: var(--color-dark);
}

hr {
	border: none;
	border-block-start: var(--stroke);
	margin-block: var(--flow-space, var(--space-xl));
}

svg:not([class]) {
	width: auto;
	height: 1lh;
}

svg {
	flex-shrink: 0;
}

svg[role='img'][width][height] {
	width: revert;
	height: revert;
	background: var(--color-ligth);
	padding: var(--space-cs);
}

/* There's a .flow composition, but this prevents forms from having to have that applied where markup is harder to control in certain systems. It still uses the --flow-space variables though to make managing space easier */
form>*+* {
	margin-top: var(--flow-space, 1rem);
}

:is(input, select, textarea) {
	accent-color: var(--color-primary);
}


:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea) {
	padding: 0.5em 0.8em;
	border-radius: var(--radius-s);
	border: var(--stroke-solid);
	background: var(--color-dark);
	color: var(--color-light);
	width: 100%;

	&::placeholder {
		color: var(--color-mid);
	}
}

label {
	line-height: var(--leading-fine);
	font-weight: var(--font-medium);
}

label::after {
	content: '\A';
	white-space: pre;
}

/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */
label:has(input) {
	display: flex;
	align-items: baseline;
	gap: var(--space-s);
	font-weight: var(--font-normal);
}

label:has(input)+label:has(input) {
	--flow-space: var(--space-s-m);
}

/* Slightly adjusts the vertical position of the check/radio */
label:has(input) input {
	transform: translateY(-0.1ex);
}

input:disabled {
	background: var(--color-mid);
}

input:disabled,
label input:disabled+* {
	cursor: not-allowed;
}

fieldset {
	border: var(--stroke);
	padding: var(--space-s);
}

legend {
	font-weight: var(--font-medium);
	padding-inline: var(--space-xs);
}

summary {
	font-weight: var(--font-bold);
	cursor: pointer;
}

details[open] summary {
	margin-block-end: var(--space-s);
}

.underline {
	text-decoration: underline;
}