/*
 * Theme variables
 *
 */

:root {

	/* Default colors */
	--color-primary: rgb(0,171,90);
	--color-primary-darker: #00AB5A80;
	--color-primary-dark: #85001b;
	--color-primary-darker-des: #a74a5d;
	--color-primary-soft: #e7f1eb;
	--color-secondary: #00D170;
	--color-secondary-darker: #023c7d;
	--color-secondary-trans: #034ea200;
	--color-secondary-light: #e5edf6;

	--color-logo-text: #AB9B6E;
	--color-logo-text: #00AB5A80;
	--color-logo-top: #fff;
	--color-logo-bottom: #00AB5A;

	--color-tertiary: #bd1723;
	--color-tertiary-darker: #a30e18;


	--color-quaternary: #fafcfd;
	--color-quaternary-40pct: #fafcfd60;
	--color-quaternary-90pct: #fafcfd90;

	--color-quintenary: #ecd8b6;
	--color-white: #fefefe;
	--color-black: #161515;

	/* Greys */
	--color-grey-light: #eaeaea;
	--color-grey-very-light: #f5f3ee;
	--color-grey-bright: #cbcbcb;
	--color-grey-medium: #d5d9dd;
	--color-grey-warm: #E0D3B1;
	--color-grey-warmer: #D2C4A0;
	--color-grey-warm-soft: #eae4ce;
	--color-grey-warm-light: #f5f3ee;
	--color-grey-warm-ultra-light: #faf9f6;
	--color-just-not-salmon-pink: #08e600;


	--logo-main-color: var(--color-primary);

	--color-primary-15-opaque: rgba(0,171,90,0.15);
	--color-primary-80-opaque:rgba(0, 171, 90, 0.8);
	--color-primary-15-transp: rgba(0,171,90,0.15);

	
	/* Text colors */
	--base-text-color: #dee4dd;
	--base-text-color-75: #dee4ddbc;
	--base-text-color-white: #fff;
	--base-border-color-white: #fff;
	
	--meta-text-color: var(--color-grey-warm);

	--primary-link-color: #00AB5A;
	--primary-link-color-hover: #01d170;
	
	--secondary-text-color: #DA4167;
	--tertiary-text-color: #B0C3B9; 

	--error-color: #ee0000;
	--error-color-darker: #c10000;

	--color-deleted-text: #bbb;


	/* Typography */	
	--font-primary: "Lexend", "Montserrat", 'Helvetica Neue', sans-serif;
	--font-secondary: "Lexend", "Montserrat", 'Helvetica Neue', sans-serif; 
	--font-icon: 'Font Awesome 6 Pro';
	--text-axis: 55;

	/* Text properties <body/> */
	--font-size-default: 2rem;
	--font-weight-default: 380;
	--letter-spacing-default: 0.025rem;
	--line-height-default: 1.45;


	/* Background colors */
	--base-bg-color: #111;
	--base-bg-color-40: var(--color-quaternary-40pct);
	--base-bg-color-90: #11111190;
	--bg-color-main: var(--base-bg-color);
	--bg-color-alt: #f4f4f4;
	--bg-color-panel: var(--base-bg-color);
	--bg-color-cta-normal: #f0f0f0;
	--bg-color-label: var(--color-secondary);


	--background-pattern: none;
	--background-pattern-size: 8px 8px;

	
	/* Forms */
	--button-disabled-color: var(--color-grey-medium);
	--input-border-color: #d5d9dd;
	--input-border-color-focus: #b3bac1;

	--primary-button-bg-color:  var(--color-primary);
	--primary-button-bg-color-hover:  var(--color-white);
	--primary-button-text-color: #fff;
	--primary-button-text-color-hover: #000;
	
	--secondary-button-bg-color: var(--color-tertiary);
	--secondary-button-bg-color-hover: var(--color-black);
	--secondary-button-text-color: #fff;
	--secondary-button-text-color-hover: #fff;
	
	--secondary-button-bg-color-dark: var(--color-secondary-darker);
	--secondary-button-bg-color-dark-hover: var(--base-text-color);
	--secondary-button-text-color-dark: #fff;
	--secondary-button-text-color-dark-hover: #fff;
	
	--tertiary-button-bg-color: var(--color-tertiary);
	--tertiary-button-bg-color-hover: var(--color-tertiary-darker);
	--tertiary-button-text-color: #fff;
	--tertiary-button-text-color-hover: #fff;


	/* Header (navigation) colors */
	--nav-font-color-primary: var(--base-text-color);
	--nav-font-color-primary-hover: var(--base-text-color);
	--nav-font-color-secondary: var(--base-text-color);
	--nav-font-color-secondary-hover: var(--base-text-color);

	--header-nav-color: var(--color-white);
	
	--subnav-hover-bg-color: #f6f6f6;
	--nav-border-color: rgba(0,0,0,1);
	--nav-btn-border-color: rgba(0,0,0,0);
	--nav-btn-border-color-hover: #E9E9E9;
	--nav-btn-bg-color: rgba(0,0,0,0.1);
	--nav-btn-bg-color-hover: #E9E9E9;


	/* Footer colors */
	--footer-bg-color: #011d13;
	--footer-copy-bg-color: #01170f;
	--footer-text-color: rgba(255,255,255,0.8);
	--footer-link-color: rgba(255,255,255,0.8);
	--footer-link-color-hover: rgba(255,255,255,1);
	
	--pre-footer-bg-color:rgba(165,17,64,1);
	--pre-footer-text-color: rgba(255,255,255,0.8);
	--pre-footer-link-color: rgba(255,255,255,0.8);
	--pre-footer-link-color-hover: rgba(255,255,255,1);

	/* Search colors */
	--search-close-btn-bg-color: transparant;
	--search-close-btn-border-color: transparant;
	--search-close-btn-text: var(--footer-text-color);

	--search-close-btn-bg-color-hover: var(--color-white);


	/* Containers */
	--container-size: 84rem;
	--padding-default: 2rem;	
	--container-normal-max-width: 120rem;
	--container-small-max-width: 74rem;
	--container-medium-max-width: 110rem;
	--container-wide-max-width: 100%;
	--container-full-max-width: 100%;
	
	--halfwidth-size: calc(50% - calc(var(--default-gap) / 2));
	--thirdwidth-size: calc(33.33% - calc(var(--default-gap) * 2 / 3));
	--halfwidth-size-large-gap: calc(50% - calc(var(--large-gap) / 2));
	--thirdwidth-size-large-gap: calc(33.33% - calc(var(--large-gap) * 2 / 3));

	--grid--colums-default: minmax(2rem, 1fr) repeat(4, minmax(auto, calc( var(--container-size) / 4) )) minmax(2rem, 1fr);
	--grid--colums-half-left: minmax(2rem, 1fr) repeat(2, minmax(auto, calc( var(--container-size) / 4) ));
	--grid--colums-half-right: repeat(2, minmax(auto, calc( var(--container-size) / 4) )) minmax(2rem, 1fr);
	

	/* gaps and paddings */
	--default-gap: 3rem;
	--large-gap: 4rem;
	--small-gap: 2rem;
	--mini-gap: calc(var(--default-gap) / 3);

	--section-padding-default: 5rem;
	/* padding to honor to keep text readable */
	--container-padding-side: 2rem;
	--container-padding-side-menu: var(--container-padding-side);
	--container-padding-side-nav: calc( ( ( 100vw - var(--container-normal-max-width) ) / 2 ) );


	/* Shadows */
	--box-shadow-color-default: rgba(0,0,0,0.14);
	--box-shadow-color-subtle: rgba(0,0,0,0.25);
	--box-shadow-color-minimal: rgba(0,0,0,0.1);


	/* swiper */
	--swiper-navigation-sides-offset: 0;
	--swiper-padding-space: 4rem;

}

/* Larger than mobile */
@media (min-width: 400px) {
	:root {
		--container-padding-side: 3rem;
	}
}
/* Only on mobile */
@media (max-width: 550px) {
	:root {
		--grid--colums-default: minmax(2rem, 1fr) repeat(4, minmax(auto, 22%)) minmax(2rem, 1fr);
	}
}
/* Larger than phablet */
@media (min-width: 550px) { 
	:root {
		--container-padding-side: 4rem;	
	}
}
@media (min-width: 750px) { /* Larger than tablet */
	:root {
		--container-padding-side: 5rem;
	}
}