/*VARIABLES START*/
:root,
[data-accessibility~="light"] {
	--primary-color: #252525;
	--primary-text-color: #252525;
	--bg-color: #F4F3F2;

	--shade-1: #F2F2F4;	
	--shade-2: #EBEAE9;
	--shade-3: #BEBDBC;
	--shade-4: #8B8A89;
	--shade-5: #5B5A59;

	--caution-color: #FFBA49;
	--focus-color: #F08000;	
	--error-color: #C1292E;
	--success-color: #7EA16B;
	--info-color: #235789;

	--font-size-small: 0.8rem;		    /*16px*/
	--line-height-small: 1rem;		    /*16px*/
	
	--font-size: 1rem;				    /*20px*/
	--line-height: 1.5rem;			    /*30px*/

	--font-size-medium: 1.25rem;	    /*25px*/
	--line-height-medium: 1.9rem;    	/*38px*/

	--title-1-size: 3.75rem;		    /*75px*/
	--title-1-line: 3.75rem;		    /*75px*/

	--title-2-size: 1.75rem;		    /*35px*/
	--title-2-line: 1.2rem;			    /*24px*/

	--title-3-size: 1.15rem;		    /*23px*/
	--title-3-line: 1.75rem;		    /*35px*/

	--title-4-size: 1rem;			    /*20px*/
	--title-4-line: 1.5rem;			    /*30px*/

	--content-width: 68.3rem;           /* 1366px Default desktop width */

	--mobile-width-small: 16rem;        /* 320px Extra small mobile (e.g., older smartphones) */
	--mobile-width-medium: 24rem;       /* 480px Small mobile */
	--mobile-width: 38.4rem;            /* 768px Regular mobile */
	--tablet-width-small: 48rem;        /* 960px Small tablets */
	--tablet-width: 51.2rem;            /* 1024px Regular tablets */
	--tablet-width-large: 64rem;        /* 1280px Large tablets or smaller laptops */
	--desktop-width-small: 72rem;       /* 1440px Smaller desktops */
	--desktop-width-large: 96rem;       /* 1920px Full HD desktop */
	--desktop-ultrawide: 128rem;        /* 2560px Ultrawide desktop screens */

	--spacing-xx-small: 0.25rem;	    /*5x*/
	--spacing-x-small: 0.5rem;		    /*10px*/
	--spacing-small: 0.75rem;		    /*15px*/
	--spacing-normal: 1rem;			    /*20px*/
	--spacing-medium: 1.25rem;		    /*25px*/
	--spacing-large: 1.5rem;		    /*30px*/
	--spacing-x-large: 1.75rem;		    /*35px*/
	--spacing-xx-large: 2.5rem;		    /*50px*/
	--spacing-xxx-large: 2.75rem;	    /*55px*/

	--letter-spacing-largest: 0.1rem;	/*2px*/
	--letter-spacing-large: 0.075rem;	/*1.5px*/
	--letter-spacing-medium: 0.06rem;	/*1.2px*/
	--letter-spacing-normal: 0.05rem;	/*1px*/
	--letter-spacing-small: 0.025rem;	/*0.5px*/
}

@media (max-width: 48rem) {
	:root,
	[data-accessibility~="light"] {
		--title-1-size: 2.75rem;
		--title-1-line: 2.75rem;

		--title-2-size: 1.4rem;
		--title-2-line: 1.8rem;

		--letter-spacing-normal: 0.025rem;
	}
}

[data-accessibility~="dark"] {
	--primary-color: #DADADA;
	--primary-text-color: #DADADA;
	--bg-color: #252525;

	--shade-1: #3A3A3A;                 /* Slightly lighter for UI borders or highlights */
	--shade-2: #525252;                 /* Mid-gray for neutral elements */
    --shade-3: #7A7A7A;                 /* Muted gray for less important text */
	--shade-4: #A9A9A9;                 /* Lighter gray for subtle elements */
	--shade-5: #1A1A1A;                 /* Darker shade for background contrast */

	--caution-color: #FFBA49;	
	--focus-color: #F08000;             /* Bright orange for focus indication */
	--error-color: #FF5E5E;             /* Softer red for errors (to avoid being too harsh) */
	--success-color: #A8E490;			/* Softer green for success feedback */
	--info-color: #82B3FF;              /* Softer blue for informational elements */
}

[data-accessibility~="high-contrast"] {
	--primary-color: #FFFFFF;           /* Bright white for primary UI elements */
	--primary-text-color: #FFFFFF;      /* Pure black for text */
	--bg-color: #000000;                /* Pure black for background */

	--shade-1: #FFFFFF;                 /* Pure white for highlights */
	--shade-2: #E0E0E0;                 /* Bright gray for borders */
	--shade-3: #A0A0A0;                 /* Mid-gray for inactive states */
	--shade-4: #606060;                 /* Darker gray for contrast */
	--shade-5: #000000;                 /* Background-like for deep contrast */

	--caution-color: #FFBA49;	
	--focus-color: #FFD700;             /* Bright yellow for focus indication */
	--error-color: #FF0000;             /* Bright red for errors */
	--success-color: #00FF00;           /* Bright green for success */
	--info-color: #00BFFF;              /* Bright cyan for informational elements */
}

[data-accessibility~="narrow"] {
	--content-width: 48rem;             /* 960px */
}

[data-accessibility~="regular"] {
	--content-width: 68.3rem;           /* 1366px */
}

[data-accessibility~="wider"] {
	--content-width: 80rem;             /* 1600px */
}

[data-accessibility~="extra-wide"] {
	--content-width: 96rem;             /* 1920px */
}

[data-accessibility~="unlimited"] {
	--content-width: 100%;
}

[data-accessibility~="small"] {
	--default-font-size: 16px;
}

[data-accessibility~="normal"] {
	--default-font-size: 20px;
}

[data-accessibility~="large"] {
	--default-font-size: 24px;
}

[data-accessibility~="dynamic"] {
	--default-font-size: 100%;
}

html[data-accessibility~="cursor"] {
    cursor: url(cursor-icon-bg.svg), auto;
}

html[data-accessibility~="cursor"] a,
html[data-accessibility~="cursor"] button {
	cursor: url(cursor-hand-icon-bg.svg), pointer;
}

html[data-accessibility~="cursor"] textarea,
html[data-accessibility~="cursor"] input[type="text"],
html[data-accessibility~="cursor"] input[type="email"],
html[data-accessibility~="cursor"] input[type="password"],
html[data-accessibility~="cursor"] p,
html[data-accessibility~="cursor"] ul li {
    cursor: url(text-cursor-icon-bg.svg), pointer;
}
/*VARIABLES END*/