@layer generic {
	:root
	{
		/* COLORS */

		/* Color Wheel */
		/* Color Palette */
		--color-primary: transparent;
		--color-secondary: transparent;
		--color-success: transparent;
		--color-danger: transparent;
		--color-warning: transparent;
		--color-info: transparent;
		--color-accent: transparent;
		--color-error: transparent;
		--color-light: transparent;
		--color-muted: transparent;
		--color-dark: transparent;

		/* LAYOUT */

		/* Aspect Ratio */
		--ratio-square: 1 / 1;
		--ratio-video-h: 16 / 9;
		--ratio-video-v: 9 / 16;
		--ratio-pan: 21 / 9;
		
		/* Box Heights */
		/* Box Widths */		
		/* Box Shadows */
		--box-shadow-base: initial;
		--box-shadow-strong: initial;
		--box-shadow-stronger: initial;
		--box-shadow-weak: initial;
		--box-shadow-weaker: initial;

		/* Spacings */
		--spacing-base: 1rem;
		--spacing-dynamic: clamp(0.8rem, 1.25vmin + 1.25vmax, 1.25rem);

        --spacing-2xs: calc(var(--spacing-base) * 0.125);
        --spacing-xs: calc(var(--spacing-base) * 0.25);
        --spacing-sm: calc(var(--spacing-base) * 0.5);
        --spacing-md: var(--spacing-base);
        --spacing-lg: calc(var(--spacing-base) * 2);
        --spacing-xl: calc(var(--spacing-base) * 4);
        --spacing-2xl: calc(var(--spacing-base) * 8);

        --spacing-2dxs: calc(var(--spacing-dynamic) * 0.125);
        --spacing-dxs: calc(var(--spacing-dynamic) * 0.25);
        --spacing-dsm: calc(var(--spacing-dynamic) * 0.5);
        --spacing-dmd: var(--spacing-dynamic);
        --spacing-dlg: calc(var(--spacing-dynamic) * 2);
        --spacing-dxl: calc(var(--spacing-dynamic) * 4);
        --spacing-2dxl: calc(var(--spacing-dynamic) * 8);

		/* Border Radiuses */
		--border-radius-base: 0.5rem;

		--border-radius-2xs: calc(var(--border-radius-base) * 0.25);
		--border-radius-xs: calc(var(--border-radius-base) * 0.33);
		--border-radius-sm: calc(var(--border-radius-base) * 0.5);
		--border-radius-md: var(--border-radius-base);
		--border-radius-lg: calc(var(--border-radius-base) * 2);
		--border-radius-xl: calc(var(--border-radius-base) * 3);
		--border-radius-2xl: calc(var(--border-radius-base) * 4);

		--border-radius-nil: 0;
		--border-radius-full: 50%;

		/* TYPOGRAPHY */

		/* Font Families */
		--font-family-base: sans;
        --font-family-accent: serif;
        --font-family-code: monospace;

		/* Font Sizes */
		--font-size-base: 1rem;
		--font-size-dynamic: clamp(0.8rem, 0.2rem + 2vh, 1.25rem);

        --font-size-xs: calc(var(--font-size-base) * 0.5);
        --font-size-sm: calc(var(--font-size-base) * 0.8);
        --font-size-md: var(--font-size-base);
        --font-size-lg: calc(var(--font-size-base) * 1.25);
        --font-size-xl: calc(var(--font-size-base) * 1.6);
        --font-size-2xl: calc(var(--font-size-base) * 2);
        --font-size-3xl: calc(var(--font-size-base) * 2.5);

        --font-size-dxs: calc(var(--font-size-dynamic) * 0.5);
        --font-size-dsm: calc(var(--font-size-dynamic) * 0.8);
        --font-size-dmd: var(--font-size-dynamic);
        --font-size-dlg: calc(var(--font-size-dynamic) * 1.25);
        --font-size-dxl: calc(var(--font-size-dynamic) * 1.6);
        --font-size-2dxl: calc(var(--font-size-dynamic) * 2);
        --font-size-3dxl: calc(var(--font-size-dynamic) * 2.5);

		/* Text Shadows */
		--text-shadow-base: initial;
		--text-shadow-strong: initial;
		--text-shadow-stronger: initial;
		--text-shadow-weak: initial;
		--text-shadow-weaker: initial;

		
		/* OTHER */
		/* Durations */
		--duration-base: .2s;
		--duration-quick: calc(var(--duration-base) * 0.5);
		--duration-quicker: calc(var(--duration-base) * 0.25);
		--duration-slow: calc(var(--duration-base) * 2);
		--duration-slower: calc(var(--duration-base) * 4);

		/* Z-index */
		--z-index-last: -999999;
		--z-index-lower: 0;
		--z-index-low: 0;
		--z-index-base: 0;
		--z-index-up: 0;
		--z-index-upper: 0;
		--z-index-first: 999999;

		/* BASIC RULES */
		color: var(--color-dark);
		background-color: var(--color-secondary);
		font-family: var(--font-family-base);
	}

	main {
		overflow: hidden;
	}

	main > section {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		height: 100vh;
		padding: 0 var(--spacing-dmd);
	}

	section > header,
	section > footer {
		flex-basis: 10vh;
		display: grid;
		grid-template-columns: 1fr 8fr 1fr;
		grid-template-areas: "left center right";
	}

	section > header > button:first-child
	{
		grid-area: left;
	}

	section > header > button:last-child
	{
		grid-area: right;
	}

	section > header > :not(button),
	section > footer > :not(button) {
		grid-area: center;
	}
	
	section > :not(header, footer) {
		flex-grow: 2;
	}

	@media screen and (orientation: portrait) {
	}

	@media screen and (orientation: landscape) {

	}

	/*
		BREAKPOINTS VALUES
		------------------
		xs:  <40em
		sm:   40em (~640px)
		md:   48em (~768px)
		lg:   64em (~1024px)
		xl:   80em (~1280px)
		2xl:  96em (~1536px)
		3xl: 120em (~1920px)
	*/

	@media screen and (min-width: 40em) {

	}

	@media screen and (min-width: 48em) {

	}

	@media screen and (min-width: 64em) {

	}

	@media screen and (min-width: 80em) {

	}

	@media screen and (min-width: 96em) {

	}

	@media screen and (min-width: 120em) {

	}

	@media screen and (prefers-reduced-motion: reduce) {

	}

	@media screen and (prefers-color-scheme: dark) {

	}

	@media screen and (display-mode: fullscreen) {

	}

	@media screen and (display-mode: standalone) {

	}

	@media screen and (display-mode: minimal-ui) {

	}
}