/* core/_variables.css */
:root {
	/* --------------------------- background colors */
	/* body */
	--body-bg : #f8e4ff;
	--header-bg : var(--body-bg);
	--block-bg : var(--body-bg);
	--body-bg-hover : #ad9fb2;
	--main-text-color : #323232;
	--inverted-text-color : var(--body-bg);
	--sidebar-bg: var(--main-text-color);
    --divider-color: var(--main-text-color); /*rgba(0, 0, 0, 0.15);*/
    
    /* form */
	--form-bg : --sidebar-bg;
	--panel-bg : var(--form-bg);

	/* popup*/
	--modal-bg: #00000080;
	--popup-bg : var(--sidebar-bg);
	
	/* tab */
	--inactive-tab-bg : #5085A5;
	--inactive-tab-bg-hover : #5085A580;
	--active-tab-bg : #99CCFF80;
	
	/* menu */
	--main-menu-bg: --body-bg;
	--menu-hover-bg: #4A88A8;
	--menu-active-bg: #6B9BC0;
	--menu-logo-hover-bg: rgba(255, 255, 255, 0.05);
	
	
	/* buttons */
	--action-bg : var(--body-bg);
	--action-bg-hover : #7299BF;
	
	--inverted-action-bg : var(--body-bg);
	--inverted-action-bg-hover : var(--body-bg-hover);
	
	/* font weights */
	--font-weight-light: 200;
    --font-weight-semilight: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
	
	/* --------------------------- text color */
	/* base */
	
	--error-color : red;
	--alert-color: #D9512C;
	--success-color : #4BB543;

	--action-color : var(--main-text-color); /* #13232F; */

	--req-color : var(--alert-color);
	--link-color : var(--main-text-color);
	--link-color-hover : #7299BF;
	
	--active-tab-color : var(--main-text-color);
	--inverted-active-tab-color : var(--inverted-text-color);
	--inverted-divider-color : var(--inverted-text-color); /*rgba(248, 228, 255, 0.7);*/

	/* gaps */
	--section-gap: 1.5rem;
	--header-height: 5.5rem;  /* adjust to your actual header height */
  	--modal-offset: calc(var(--header-height) + 1rem);
  	
	/* components */
	--tab-text-color : var(--main-text-color);
	
	/* --------------------------- borders */
	--input-border-color : var(--main-text-color);
	--focus-input-border-color : var(--main-text-color);
	--inverted-input-border-color : var(--body-bg);
	--focus-inverted-input-border-color : var(--body-bg);
	
	/* --------------------------- radius */
	--shared-radius : 20px;
	
	--input-radius : var(--shared-radius);
	--tab-radius: var(--shared-radius);
	--button-radius: var(--shared-radius);
	--popup-radius:var(--shared-radius);
	--form-radius:var(--shared-radius);
	--panel-radius:var(--shared-radius);

	
	/* --------------------------- shadows */
	--box-shadow : #27597154;
	--inverted-box-shadow : #f8e4ff26;

	--form-shadow : 0px 4px 10px 4px var(--box-shadow);
	--panel-shadow : 0px 4px 10px 4px var(--box-shadow);
	--input-shadow : 0px 4px 10px 4px var(--box-shadow);
	--inverted-form-shadow : 0px 4px 10px 4px var(--inverted-box-shadow);
	--inverted-panel-shadow : 0px 4px 10px 4px var(--inverted-box-shadow);
	--inverted-input-shadow : 0px 4px 7px 0px var(--inverted-box-shadow);
	
	/* --------------------------- content-left padding */
   	--content-left-left-padding: 0.5rem;
   	--content-left-right-padding: 1rem;
   	
   	/* --------------------------- content-right padding */
   	--content-right-left-padding: 1rem;
   	--content-right-right-padding: 0.7rem;

	
	/* --------------------------- Transition timing */
 	--transition-fast: 150ms;    /* quick micro-interactions */
 	--transition-medium: 300ms;  /* most hover/focus/slide animations */
  	--transition-slow: 600ms;    /* more pronounced reveals or complex motion */

	/* Easing (optional) */
	--easing-standard: ease-in-out;
	
	--default-animation : animatezoom 0.5s;
}