@import 'mixins/breakpoints';

@import 'vars/animation';
@import 'vars/elevation';
@import 'vars/palette';
@import 'vars/typography';

:root {
	@extend %animation-vars;
	@extend %elevation-vars;
	@extend %palette-vars;
	@extend %typography-vars;

	// default sizes
	--spacing: 1.6rem;
	--gutter: var(--spacing);
	--radius: 0.4rem;

	--increment: 6.4rem;

	@include breakpoint-mobile {
		@media (orientation: portrait) {
			--increment: 5.6rem;
		}

		@media (orientation: landscape) {
			--increment: 4.8rem;
		}
	}

	:global(.dense) {
		--increment: 4.8rem;
	}

	// default colors
	--primary: var(--lavender-5);
	--on-primary: var(--on-lavender-5);
	--primary-variant: var(--lavender-8);
	--on-primary-variant: var(--on-lavender-8);

	--secondary: var(--teal-5);
	--on-secondary: var(--on-teal-5);
	--secondary-variant: var(--teal-8);
	--on-secondary-variant: var(--on-teal-8);

	--base: var(--gray-1);
	--on-base: var(--on-gray-1);
	--base-inverse: var(--black);
	--on-base-inverse: var(--on-black);

	--surface: var(--white);
	--on-surface: var(--on-white);
	--surface-inverse: var(--gray-9);
	--on-surface-inverse: var(--on-gray-9);

	--success: var(--green-5);
	--on-success: var(--on-green-5);
	--warning: var(--amber-5);
	--on-warning: var(--on-amber-5);
	--error: var(--red-5);
	--on-error: var(--on-red-5);
	--info: var(--blue-5);
	--on-info: var(--on-blue-5);

	--color: var(--on-base);
	--background: var(--base);

	body,
	.primary,
	.secondary,
	.base,
	.surface,
	.current-color {
		color: RGBA(var(--color, black), var(--color-alpha, 1));
		background-color: RGBA(var(--background, white), var(--background-alpha, 1));
	}

	.invert {
		color: RGBA(var(--background, white), var(--background-alpha, 1));
		background-color: RGBA(var(--color, black), var(--color-alpha, 1));
	}

	.primary {
		--color: var(--on-primary);
		--background: var(--primary);
	}

	.secondary {
		--color: var(--on-secondary);
		--background: var(--secondary);
	}

	.base {
		--color: var(--on-base);
		--background: var(--base);
	}

	.surface {
		--color: var(--on-surface);
		--background: var(--surface);
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: transparent;
	color: inherit;
	fill: currentColor;
	border: none;
	text-decoration: none;
}

html {
	font-size: 62.5%;
	font-family: var(--font-body);
	text-rendering: optimizeLegibility;

	overflow-x: hidden;
	overflow-y: scroll;
}

body {
	--color: var(--on-base);
	--background: var(--base);

	min-height: 100vh;
	color: RGBA(var(--color, black), var(--color-alpha, 1));
	font-size: 1.6rem;
}

img {
	display: block;
}

@import 'base/animations';
@import 'base/content';
@import 'base/divider';
@import 'base/images';
@import 'base/interactive';
@import 'base/typography';