/* 
  This section defines CSS custom properties (variables) in the :root selector, 
  which allows for easy management of colors, typography, spacing, and layout settings 
  throughout the entire stylesheet. Using CSS variables helps maintain consistency 
  and facilitates updates across the design.
*/
:root {
	
	
	/* Color Variables */
    --e-global-color-primary: #4353ff;
    --e-global-color-secondary: #38d996;
    --e-global-color-text: #1a1a1a;
    --e-global-color-accent: #4353ff;
    --e-global-color-light: #F5F5F5;
    --color-text: #757575;
    --color-border: #e7e7e7;
    --color-border-hard: #d9d9d9;
    --color-white: #ffffff;
    --color-neutral-transparent: #9f9f9f4d;
    --color-overlay: #1a1a1a66;
	
	
	/* Typography Variables */
    --e-global-typography-primary-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", sans-serif;
    --e-global-typography-primary-font-weight: 700;
    --e-global-typography-secondary-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", sans-serif;
    --e-global-typography-secondary-font-weight: 600;
    --e-global-typography-text-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", sans-serif;
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", sans-serif;
    --e-global-typography-accent-font-weight: 500;
    --line-height-default: 1.6;
    --line-height-paragraph: 1.75;
    --letter-spacing-default: -0.027em;
    --letter-spacing-small: 0.04em;
	
	
	/* Font Size Variables */
    --font-size-default: 14px;
    --font-size-paragraphs: 16px;
    --font-size-main-menu: 16px;
	
	
	/* Layout and Spacing Variables */
    --global-border-radius: 12px;
    --button-border-radius: 25px;
    --box-shadow: 0 40px 60px 0 rgb(0 0 0 / 5%);
    --global-transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --image-transition: all 0.7s cubic-bezier(.2, 1, .22, 1);
	
	
    /* Container and Spacing Variables */
    --container-max-width: 1240px;
    --listIndent: 2.5em;
    --listItemSpacing: 0.3em;
    --content-spacing: 1.5em;
    --small-content-spacing: 0.75rem;
    --headings-content-spacing: calc(0.3em + 10px);
    --column-spacing: 20px;
    --vertical-spacing: 100px;
    --titlebar-spacing: 100px;
    --mobile-spacing: 50px;
    --sidebar-width: 25%;
    --sidebar-widgets-spacing: 50px;
    --grid-columns-gap: 30px;
    --component-height: 50px;
    --button-padding: 25px;
    --header-height: 70px;
    --block-width: 850px;
    --logo-height: 32px;
    --siteflex-post-title: 32px;
    --icon-font-size: 35px;
    --icon-large-font-size: 45px;
    --admin-bar: 0px;
    --transparent-navigation-position: sticky;

    /* Admin Variables */
    --admin-menu-thumbnail-url: url('../img/thumbnail-menu.png');

}


/* 
  Media queries to adjust styles for different screen sizes.
  This helps ensure the design is responsive and user-friendly across devices.
*/

/* For devices with a maximum width of 766.98px (mobile devices) */
@media (max-width:766.98px) {
     :root {
        --small-content-spacing: 0.5rem; /* Reduce spacing for smaller devices */
        --sidebar-widgets-spacing: 30px; /* Adjust widget spacing for smaller screens */
        --component-height: 50px; /* Ensure component height remains consistent */
    }
}


/* For devices with width between 767px and 1023.98px (tablets) */
@media (min-width:767px) and (max-width:1023.98px) {
     :root {
        --block-width: 100%;  /* Set block width to full for tablet screens */
    }
}