@layer reset, wordpress, main, views, components;
@layer main {
	@layer variables {
		:root {
			/* Layout */
			--spacer: 1rem;
			--root-width: 990px;
			--container-max-width: var(--root-width);
			--container-padding: calc(var(--spacer) * 1.5);
			--section-padding: calc(var(--spacer) * 4);
			--column-gap: var(--spacer);
			--row-gap: 0;

			/* Typography */
			--font-montserrat: Montserrat, sans-serif;
			--font-icon: FontAwesome;
			--font-icon-sharp: FontAwesomeSharp;
			--font-brands: FontAwesomeBrands;
			--font-content: var(--font-montserrat);

			/* Colors */
			--color-black: 0, 0, 0;
			--color-white: 255, 255, 255;
			--color-blue: 0, 52, 101;
			--color-green: 15, 125, 19;
			--color-dark-gray: 103, 103, 103;

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

			/* Text */
			--color-text: var(--color-dark);
			--color-link: var(--color-crimson-2);
			--color-link-hover: var(--color-medium-blue);
			--color-link-visited: var(--color-crimson-2);

			/* Buttons */
			--color-btn-primary: var(--color-crimson);
			--color-btn-primary-hover: var(--color-dark-red);
			--color-btn-secondary: var(--color-blue);
			--color-btn-secondary-hover: var(--color-dark-blue);
			--color-btn-white: var(--color-white);
			--color-btn-white-hover: var(--color-dark-blue);

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