/*
 * Theme variables
 *
 */

/* TODO: use color-mix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* @supports not ( color-mix(in srgb, lime 80%, transparent) ) {
} */


/* Typorgraphy
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	--z-font-primary: 'Asap', 'Figtree', 'Helvetica Neue', sans-serif; /* maybe Platypi or */
	--z-font-secondary: 'Asap', 'Figtree', 'Helvetica Neue', sans-serif;
	--z-font-icon: 'Font Awesome 6 Pro';
	--z-font-text-axis: 55;
	
	--z-font-size-default: 2rem;
	--z-font-weight-default: 450;
	--z-font-letter-spacing-default: 0.05rem;
	--z-font-line-height-default: 1.45;
}

/* Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	/* Containers */
	--z-container-size: 120rem;
	--z-padding-default: 2rem;	
	--z-container-normal-max-width: 120rem;
	--z-container-small-max-width: 74rem;
	--z-container-medium-max-width: 110rem;
	--z-container-wide-max-width: 100%;
	--z-container-full-max-width: 100%;

	--z-container-standard-width: 96rem;
	
	--z-halfwidth-size: calc(50% - calc(var(--z-default-gap) / 2));
	--z-thirdwidth-size: calc(33.33% - calc(var(--z-default-gap) * 2 / 3));
	--z-halfwidth-size-large-gap: calc(50% - calc(var(--z-large-gap) / 2));
	--z-thirdwidth-size-large-gap: calc(33.33% - calc(var(--z-large-gap) * 2 / 3));

	--z-grid--colums-default: minmax(2rem, 1fr) repeat(4, minmax(auto, 13ch)) minmax(2rem, 1fr);

	/* margins */
	--z-margin-default-top: 1rem;
	--z-margin-default-bottom: 2rem;

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

	--z-table-cell-padding-top: 1.2rem;
	--z-table-cell-padding-side: 1.5rem;

	--z-section-padding-default: 0;

	/* padding to honor to keep text readable */
	--z-container-padding-side: 2rem;
	--z-container-padding-side-menu: var(--z-container-padding-side);
	
	/* menu */
	--z-header-nav-padding-top: 2rem;
	--z-menu-icon-left-position: var(--z-container-padding-side);
	--z-menu-icon-top-position: var(--z-header-nav-padding-top);
	--z-header-nav-padding-side: calc( 2 * var(--z-padding-default) );
	--z-header-nav-padding: var(--z-header-nav-padding-top) var(--z-header-nav-padding-side);

	--z-menu-icon-width: 4rem;

	/* image props */
	--z-img-border-radius: 3rem;

}

/* The new form colors from @c99rahul
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --z-body-bg: #fffdf5;
	--z-body-bg-40pct: #fffdf560;
	--z-body-bg-90pct: #fffdf590;
	--z-body-bg-selected: #d5f1ff;
	--z-body-bg-menu-open: #f4f0e3;
	--z-footer-bg-color: transparent;
    --z-body-text: #111;
	--z-body-text-r: 17;
	--z-body-text-g: 17;
	--z-body-text-b: 17;
	--z-body-text: rgba(var(--z-body-text-r),var(--z-body-text-r),var(--z-body-text-r), 1);
	--z-body-text-80pct: rgba(var(--z-body-text-r),var(--z-body-text-r),var(--z-body-text-r), 0.8);
	--z-body-text-60pct: rgba(var(--z-body-text-r),var(--z-body-text-r),var(--z-body-text-r), 0.6);
	--z-body-text-40pct: rgba(var(--z-body-text-r),var(--z-body-text-r),var(--z-body-text-r), 0.4);
	--z-body-text-20pct: rgba(var(--z-body-text-r),var(--z-body-text-r),var(--z-body-text-r), 0.2);
	--z-body-text-10pct: rgba(var(--z-body-text-r),var(--z-body-text-r),var(--z-body-text-r), 0.1);

    --z-body-accent: var(--z-color-primary);
	--z-body-accent-alt: var(--z-color-secondary);
    --z-body-accent-contrast: #fff;
	--z-label-main-color-default: #4b4a57;
    --z-textfld-bg: #fff;
    --z-textfld-focus-bg: #fff;
    --z-textfld-active-bg: #fff;
    --z-textfld-border: #e0e0e0;
    --z-textfld-active-border: #aaa;
    --z-textfld-focus-border: var(--z-body-accent);
    --z-textfld-focus-border: var(--z-body-text-60pct);
    --z-textfld-valid-border: hsl(140, 50%, 63%);
    --z-textfld-valid-active-border: hsl(140, 75%, 30%); /* hsl(140 50% 65%) */
    --z-textfld-valid-focus-border: hsl(140, 75%, 30%); /* hsl(140 50% 50%) */
    --z-textfld-invalid-border: hsl(20 65% 75%);
    --z-textfld-invalid-active-border: hsl(20 65% 65%);
    --z-textfld-invalid-focus-border: hsl(20 65% 50%);
	--z-checkradiofld-focus-border: var(--z-textfld-focus-border);
	--z-checkradiofld-checked-border: var(--z-body-accent);
	--z-checkradiofld-checked-bg: var(--z-body-accent);
    --z-btn-text: var(--z-body-accent-contrast);
    --z-btn-bg: var(--z-body-accent);
    --z-btn-active-bg: var(--z-primary-link-color-visited);
    --z-btn-focus-bg: var(--z-primary-link-color-hover);
	--z-color-bg-checbox-checked: #fff;
	--z-input-min-height: 5rem;
}
@media (max-width: 900px) {
	:root {
		--z-textfld-bg: #ffffffb4;
		--z-textfld-focus-bg: #fff;
		--z-textfld-active-bg: #fff;
	
	}
}


 :root {

	/* Default colors */
	--z-color-primary: #78216b; /* GGD purple */
	--z-color-primary-darkmode:#ef3059; ; /*  #6c5ce7 */
	--z-color-primary-darker: #671a5c;
	--z-color-primary-dark: #59094d;  /* #491341; */
	--z-color-primary-darker-des: #a74a5d;
	--z-color-secondary: #077c98; /* GGD blue */
	--z-color-secondary-darker: #023c7d;
	--z-color-secondary-trans: #034ea200;
	--z-color-secondary-light: #e5edf6;
	--z-color-tertiairy: #fae405; /* GGD yellow */
	--z-color-quaternary: #fafcfd;
	--z-color-quintenary: #ecd8b6;
	--z-color-white: #fefefe;
	--z-color-white-real: #fff;
	--z-color-black: #161515;

	/* Greys */
	--z-color-grey-light: #f4f6f7;
	--z-color-grey-medium: #d5d9dd;

	/* Text colors */
	--z-base-text-color: #2e353e;
	--z-base-text-color-75: #2e353ebc;
	--z-base-text-color-white: var(--z-color-white-real);
	--z-base-border-color-white: var(--z-color-white-real);
	--z-footer-text-color: var(--z-base-text-color);	

	/* Link colors */
	--z-primary-link-color: var(--z-color-primary);
	--z-primary-link-color-hover: var(--z-color-primary-dark);
	--z-primary-link-color-visited: var(--z-color-primary-darker);
	/* Link colors */
	--z-footer-link-color: var(--z-base-text-color);
	--z-footer-link-color-hover: var(--z-base-text-color);
	--z-footer-link-color-visited: var(--z-base-text-color);


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

	--z-color-deleted-text: #bbb;



	/* Header navigation colors */
	--z-nav-font-color-primary: var(--z-body-text);
	--z-nav-font-color-primary-hover: var(--z-body-text);
	--z-nav-header-color: var(--z-color-primary);
	--z-nav-header-color-open: var(--z-nav-font-color-primary-hover);


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



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

}



@media (max-width: 1100px) { 
	:root {
		--z-footer-text-color: #fff;
		--z-footer-link-color: #ffffffbb;
		--z-footer-link-color-hover: #fff;
		--z-footer-link-color-visited: #fff;


	}
}







/* Larger than mobile */
@media (min-width: 400px) {
	:root {
		--z-container-padding-side: 3rem;
	}
}
/* Larger than phablet */
@media (min-width: 550px) { 
	:root {
		--z-container-padding-side: 4rem;	
	}
}
@media (min-width: 750px) { /* Larger than tablet */
	:root {
		--z-container-padding-side: 5rem;
	}
}














/*
 * Forms measures - do we need it?
 *
 */
:root {
    --z-leading-inputs: 120%;
    --z-padding-inputs: 1rem 2.5rem;
	--z-padding-buttons: 1rem 5rem;
    --z-margin-label: 0.5rem;
    --z-margin-form-gap: 1.5rem;
    --z-margin-btn-gap: 1rem;
    --z-width-input-border: 0.2rem;
    --z-width-inputs: 45rem;
    --z-width-textarea: 45rem;
    --z-height-textarea: 15rem;
    --z-radius-inputs: 5rem;
    --z-radius-inputs-alt: 1rem;
	--z-radius-buttons: var(--z-radius-inputs);
    --z-opacity-input-disabled: 0.5;
    --z-transition-duration-inputs: 250ms;
    --z-transition-function-inputs: ease-in-out;
    --z-transition-inputs: color var(--z-transition-duration-inputs) var(--z-transition-function-inputs),
      background-color var(--z-transition-duration-inputs) var(--z-transition-function-inputs),
      border-color var(--z-transition-duration-inputs) var(--z-transition-function-inputs);
  }
  /* Larger than phablet */
@media (max-width: 550px) { 
	:root {
		--z-width-inputs: 100%;
		--z-width-textarea: 100%;
	}
}