@layer reset, config, screens, layouts, grids, utilities;

@layer reset {
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		text-wrap: pretty;
	}
	h1, h2, h3, h4, h5, h6 {
		font-size: inherit;
		font-weight: inherit;
	}
	a {
		color: inherit;
	}
    button, input[type="submit"], input[type="reset"] {
        cursor: pointer;
    }
	button, input, select, textarea {
		font: inherit;
		color: inherit;
		letter-spacing: inherit;
        background: unset;
	}
	input, progress, meter {
		accent-color: currentColor;
	}
	select {
		field-sizing: content;
	}
	menu, ol, ul {
		list-style: none;
	}
	hr {
		border: none;
		border-top: 1px solid currentColor;
		width: 100%;
	}
	table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse;
	}
	svg {
		paint-order: stroke fill;
	}
	audio, canvas, embed, iframe, img, object, svg, video {
		display: block;
	}
}

@layer config {
	:root {
		--phi: calc((1 + sqrt(5)) / 2);
		--m: 1rem;
		--xxs: calc(var(--m) * pow(var(--phi), -3));
		--xs: calc(var(--m) * pow(var(--phi), -2));
		--s: calc(var(--m) * pow(var(--phi), -1));
		--l: calc(var(--m) * pow(var(--phi), 1));
		--xl: calc(var(--m) * pow(var(--phi), 2));
		--xxl: calc(var(--m) * pow(var(--phi), 3));
	}
	html {
        font-size: var(--m);
		line-height: var(--m);
	}
}

@layer screens {
    .gf {
		min-width: 100dvi;
		min-height: 100dvb;
	}

    .gw {
        padding-inline: 19.1dvw;
    }

    .go {
        position: absolute;
        z-index: 1618;
        inset: 50%;
    }
}

@layer layouts {
	.gc {
		display: grid;
		> * {
			place-self: center;
		}
    }

    .gz {
		display: grid;
		> * {
			grid-area: 1/1;
		}
    }

	.gs {
		display: grid;
		> * {
			justify-self: stretch;
		}
	}
}

@layer grids {
	.gg01, .gg01d {
        display: grid;
        grid-template-columns: 1fr 1.618fr;
        grid-template-rows: 1fr;
    }
	@media (width < 576px) {
        .gg01d {
            display: grid;
			grid-template-rows: 1fr 1.618fr;
			grid-template-columns: 1fr;
		}
	}
    .gg10, .gg10d {
        display: grid;
        grid-template-columns: 1.618fr 1fr;
        grid-template-rows: 1fr;
    }
	@media (max-width: 575px) {
        .gg10d {
            display: grid;
			grid-template-rows: 1.618fr 1fr;
			grid-template-columns: 1fr;
		}
	}
}

@layer utilities {
	.gp-xxs { padding: var(--xxs); }
	.gp-xs { padding: var(--xs); }
	.gp-s  { padding: var(--s); }
	.gp-m  { padding: var(--m); }
	.gp-l  { padding: var(--l); }
	.gp-xl { padding: var(--xl); }
	.gp-xxl { padding: var(--xxl); }

	.gm-xxs { margin: var(--xxs); }
	.gm-xs { margin: var(--xs); }
	.gm-s  { margin: var(--s); }
	.gm-m  { margin: var(--m); }
	.gm-l  { margin: var(--l); }
	.gm-xl { margin: var(--xl); }
	.gm-xxl { margin: var(--xxl); }

	.gt-xxs { font-size: var(--xxs); line-height: var(--xxs); }
	.gt-xs  { font-size: var(--xs);  line-height: var(--xs); }
	.gt-s   { font-size: var(--s);   line-height: var(--s); }
	.gt-m   { font-size: var(--m);   line-height: var(--m); }
	.gt-l   { font-size: var(--l);   line-height: var(--l); }
	.gt-xl  { font-size: var(--xl);  line-height: var(--xl); }
	.gt-xxl { font-size: var(--xxl); line-height: var(--xxl); }
}
