/* Project variables – change values here.
   --primary-color and --secondary-color come from the parent theme. */

:root {
	/* fonts */
	--main-font-family: "Inter", sans-serif;
	--heading-font-family: "DM Serif Display", Georgia, serif;
	--body-font-size: 16px;
	--body-line-height: 25px;
	--body-font-size-desktop: 22px;
	--body-line-height-desktop: 34px;

	/* colors */
	--text-color: #1a1a1a;
	--hover-color: rgb(from var(--primary-color) r g b / 0.9);
	--border-color: #CDCFD2;
	--light-grey: #F6F7F7;
	--dark-grey: #5A616B;

	/* buttons */
	--button-radius: 6px;
	--button-height: 58px;
	--button-line-height: 55px;
	--button-padding: 0 2rem;

	/* spacing */
	--space-section: 70px; /* between top-level blocks / sections */
	--space-nested: 30px;  /* between blocks inside a group */
	--padding-desktop: 9.375rem;
	--padding-desktop-big: 18.75rem;
	--padding-tablet: 40px;
	--padding-mobile: 20px;
}

@media only screen and (min-width: 1100px) {
	:root {
		--space-section: 7.5rem;
		--space-nested: 2.5rem;
	}
}

/* Breakpoints (CSS variables can't be used in media queries, copy these):
   big desktop:  @media only screen and (min-width: 1900px)
   desktop:      @media only screen and (max-width: 1500px)
   desktop only: @media only screen and (min-width: 1100px)
   tablet:       @media only screen and (max-width: 1099px)
   phone:        @media only screen and (max-width: 699px)
   not phone:    @media only screen and (min-width: 700px)
*/