/*!
 * CSS Variables - Knowledge AGMA Theme
 * Version: 2.4.3
 * Modern CSS Variables extracted from existing styles
 */

:root {
	/* Colors */
	--m-color: #000000;
	--s-color: #4a8af6;
	--xs-color: #a77d24;
	--b-color: #f6f6f6;
	--d-gray-color: #8D8D8D;
	--white: #FFF;
	--black: #000;
	--gray: #8D8D8D;
	
	/* Typography */
	--font-a: 'NarkissAsaf', sans-serif;
	--font-b: 'Simpler', sans-serif;
	--font-size-base: 18.2px;
	--line-height-base: 1.5;
	
	/* Spacing */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 40px;
	
	/* Layout */
	--header-height: 10vh;
	--header-max-height: 100px;
	--aside-width: 18vw;
	--aside-max-width: 320px;
	--main-width: 40vw;
	
	/* Borders */
	--border-width: 1px;
	--border-style: solid;
	--border-dashed: dashed;
	--border-radius: 10px;
	--border-radius-round: 30px;
	--border-radius-circle: 50%;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
	--shadow-md: 4px 4px 5px #0000005e;
	
	/* Transitions */
	--transition-fast: 0.2s;
	--transition-base: 0.3s;
	--transition-slow: 1.5s;
	
	/* Z-index layers */
	--z-base: 1;
	--z-content: 2;
	--z-sticky: 999;
	--z-dropdown: 9999;
	--z-modal: 99999;
	--z-max: 999999;
	
	/* Scrollbar */
	--scrollbar-width: 10px;
	--scrollbar-width-thin: 3px;
	
	/* Media queries breakpoints */
	--breakpoint-mobile: 765px;
	--breakpoint-tablet: 768px;
	--breakpoint-desktop: 1024px;
	--breakpoint-large: 1400px;
	--breakpoint-xlarge: 1920px;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
	:root {
		--font-size-base: 18px;
		--line-height-base: 1.4;
		--header-height: 9vh;
		--aside-width: 90vw;
		--main-width: 100vw;
	}
}