@layer variables, reset, main, components, views;

@layer variables {
	:root {
		/* #region Layout */
		--spacer: 1rem;
		--root-width: 1620px;
		--container-max-width: calc(var(--container-padding) * 2 + var(--root-width));
		--container-padding: calc(var(--spacer) * 1.5);
		--section-padding: calc(var(--spacer) * 4);
		--column-gap: var(--spacer);
		--row-gap: 0;
		/* #endregion Layout */

		/* #region Typography */
		--font-family-roboto: Roboto, sans-serif;
		--font-family-roboto-condensed: Roboto Condensed, sans-serif;
		--font-family-icon: FontAwesome;

		--font-family-content: var(--font-family-roboto);
		--font-family-display: var(--font-family-roboto-condensed);
		/* #endregion Typography */

		/* #region Colors */
		--color-black: 0, 0, 0;
		--color-white: 255, 255, 255;
		--color-red: 218, 41, 28;
		--color-blue: 27, 107, 158;
		--color-dk-blue: 21, 75, 107;
		--color-lt-blue: 19, 164, 212;
		--color-purple: 138, 56, 245;
		--color-charcoal: 53, 53, 53;
		--color-dk-gray: 74, 85, 101;
		--color-md-gray: 182, 194, 201;
		--color-lt-gray: 247, 247, 247;

		/* Theme */
		--color-primary: var(--color-blue);
		--color-secondary: var(--color-red);

		/* #region Text */
		--color-text: var(--color-charcoal);
		--color-link: var(--color-blue);
		--color-link-hover: var(--color-blue);
		--color-link-active: var(--color-blue);
		--color-link-visited: var(--color-purple);
		/* #endregion Text */

		/* #region Buttons */
		--color-btn-bg: var(--color-charcoal);
		--color-btn-bg-hover: var(--color-charcoal);
		--color-btn-bg-active: var(--color-charcoal);
		--color-btn-outline-hover: var(--color-charcoal);
		--color-btn-outline-active: var(--color-charcoal);
		/* #endregion Buttons */

		@media(max-width: 768px){
			--section-padding: calc(var(--spacer) * 2.5);
		}
	}
}