/*VARIABLES START*/
:root,
[data-accessibility~="light"] {
	--primary-color: #2D2C71;
	--primary-font-color: #1D1919;
	
	--surface-color: #FCF8FB;   
	--muted-color: #A19F9F; 
	--surface-alt-color: #F1E6F5; 
	
	--secondary-font-color: #FDFEFE;
	--alt-font-color: #F0C8DC;
	
	--bg-color: #E9EBF8;
	--bg-color-alt: #FDFEFE;
	--bg-color-opposite: #8180BC;
	--bg-color-opposite-alt: #1D1919;
	--bg-color-transparent: rgba(188, 228, 231, 0.95);
	
	--inversion: 0%;
	--shadow-color: #AAAAAA;
	--highlight-color: #FFCD00;
	
	--error-color: #BB4430;
	--warning-color: #FDCA40;
	--info-color: #7189FF;
	--success-color: #6CAE75;
	--focus-color: #8180BC;	

    --main-gradient: linear-gradient(
		90deg,
		rgb(240, 200, 220) 0%,
		rgba(248, 190, 220, 1) 50%,
		rgba(45, 44, 113, 1) 100%
	); 
	
	--secondary-gradient: linear-gradient(
		90deg,
		rgba(45, 44, 113, 1) 0%,
		rgba(39, 38, 97, 0.9) 50%,
		rgba(39, 38, 97, 0.8) 100%
	);
	
	--alt-gradient: linear-gradient(
		90deg,
		rgba(248, 235, 245, 1) 0%,
		rgba(248, 235, 245, 1) 50%,
		rgba(233, 235, 248, 1) 100%
	);
	
	--default-font: 'Lato', sans-serif;
	--title-font: 'IBM Plex Serif', serif;  
    
	--letter-spacing: 0.044rem;

	--font-size-small: 0.8rem;		    
	--line-height-small: 1;		   
	
	--font-size: 1rem;				 
	--line-height: 1.5;			

	--font-size-medium: 1.25rem;	  
	--line-height-medium: 1.9;    

	--title-1-size:      2.25rem;       /*36px*/			 
	--title-2-size:      1.75rem;		/*28px*/	   
	--title-3-size:      1.5rem;		/*24px*/	
	--title-4-size:      1.25rem;		/*20px*/   
    --title-line-height: 1.25;
	
	--nav-font-size: 1.25rem;           /*20px*/
	--default-border-radius: 0.625rem;  /*10px*/
	--color-filter: unset;
	
    --content-width: 100rem;            /*1600px*/  

	--mobile-width-small:  20rem;       /* 320px Extra small mobile (e.g., older smartphones) */
	--mobile-width-medium: 30rem;       /* 480px Small mobile */
	--mobile-width:        48rem;       /* 768px Regular mobile */
	--tablet-width-small:  60rem;       /* 960px Small tablets */
	--tablet-width:        64rem;       /* 1024px Regular tablets */
	--tablet-width-large:  80rem;       /* 1280px Large tablets or smaller laptops */
	--desktop-width-small: 90rem;       /* 1440px Smaller desktops */
	--desktop-width-large: 120rem;      /* 1920px Full HD desktop */
	--desktop-ultrawide:   160rem;      /* 2560px Ultrawide desktop screens */	
	
	--spacing-xx-small:  0.25rem;       /* 4px */
	--spacing-tiny:      0.3125rem;     /* 5px */
	--spacing-mini:      0.375rem;      /* 6px */
	--spacing-x-small:   0.5rem;        /* 8px */
	--spacing-small:     1rem;          /* 16px */
	--spacing-normal:    1.5rem;        /* 24px */
	--spacing-medium:    2rem;          /* 32px */
	--spacing-large:     3rem;          /* 48px */
	--spacing-x-large:   4rem;          /* 64px */
	--spacing-xx-large:  6rem;          /* 96px */
	--spacing-xxx-large: 8rem;          /* 128px */

	--letter-spacing-largest: 0.125rem;	/*2px*/
	--letter-spacing-large:   0.081rem;	/*1.3px*/
	--letter-spacing-medium:  0.063rem;	/*1px*/
	--letter-spacing-normal:  0.044rem;	/*0.7px*/
	--letter-spacing-small:   0.019rem;	/*0.3px*/	
}

[data-accessibility~="dark"] {
	--primary-color: #8180BC;
	--primary-font-color: #FDFEFE;
	
	--surface-color: #1E1E2A;     
	--muted-color: #9C9C9C;       
	--surface-alt-color: #2A2A3A;  

	--secondary-font-color: #1D1919;
	--alt-font-color: #F0C8DC;	
	
	--bg-color: #1A1A2E;
	--bg-color-alt: #22223B;
	--bg-color-opposite: #C3C2FF;
	--bg-color-opposite-alt: #FDFEFE;
	--bg-color-transparent: rgba(34, 34, 59, 0.95);
	
	--inversion: 100%;
	--shadow-color: #000000;
	--highlight-color: #FFD633;
	
	--error-color: #FF6B5A;
	--warning-color: #FFDC5E;
	--info-color: #8AB4FF;
	--success-color: #7DDE92;
	--focus-color: #C3C2FF;
	
	--main-gradient: linear-gradient(
		90deg,
		rgb(140, 100, 140) 0%,    
		rgb(160, 120, 160) 50%,  
		rgb(45, 44, 113) 100%
	);
	
	--alt-gradient: linear-gradient(
		90deg,
		rgba(36, 36, 50, 1) 0%,   /* dark muted purple */
		rgba(36, 36, 50, 1) 50%,  /* same for smooth blend */
		rgba(28, 28, 44, 1) 100%  /* slightly darker for contrast */
	);	
}

[data-accessibility~="high-contrast"] {
	--primary-color: #FFFFFF;
	--primary-font-color: #000000;
	
	--secondary-font-color: #FFFFFF;
	--alt-font-color: #FFFF00;
	
	--surface-color: #000000;      
	--muted-color: #BFBFBF;       
	--surface-alt-color: #FFFFFF;  	
	
	--bg-color: #000000;
	--bg-color-alt: #1A1A1A;
	--bg-color-opposite: #FFFFFF;
	--bg-color-opposite-alt: #000000;
	--bg-color-transparent: rgba(0, 0, 0, 0.95);
	
	--inversion: 100%;
	--shadow-color: #000000;
	--highlight-color: #FFFF00;
	
	--error-color: #FF0000;
	--warning-color: #FFD700;
	--info-color: #00FFFF;
	--success-color: #00FF00;
	--focus-color: #FFFF00;
	
	--main-gradient: linear-gradient(
		90deg,
		#FFFFFF 0%,             
		#FFFF00 50%,             
		#000000 100%             
	);
	
	--alt-gradient: linear-gradient(
		90deg,
		#000000 0%,  /* pure black */
		#000000 50%, /* solid dark half */
		#FFFFFF 100% /* pure white at the end for max contrast */
	);	
}
/*VARIABLES END*/

[data-accessibility~="default"] {
	--default-font: 'Lato', sans-serif;
	--title-font: 'IBM Plex Serif', serif;  
}

[data-accessibility~="sans-serif"] {
	--default-font: 'Inclusive Sans', sans-serif;
	--title-font: 'Atkinson Hyperlegible Next', sans-serif;
}

[data-accessibility~="serif"] {
    --default-font: 'Source Serif 4', serif;
    --title-font: 'Source Serif 4', serif;
}

[data-accessibility~="monospace"] {
	--default-font: 'Atkinson Hyperlegible Mono', sans-serif;
	--title-font: 'Atkinson Hyperlegible Mono', sans-serif;
}

[data-accessibility~="dyslexic"] {
	--default-font: 'OpenDyslexic', sans-serif;
	--title-font: 'OpenDyslexic', sans-serif;
}

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

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

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

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

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

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

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

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

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