:root {
    color-scheme: light dark;
    
	/* BORDER */
	--border-radius: 0;
	--border-width: 1px;
    --outline-width: 2px;
		
    
	/* WRAPPER / GRID */
	--wrapper-size: 100rem;
    --wrapper-size-small: 60rem;
    --wrapper-size-mobile: 90%;
	--items-margin: clamp(.5rem, .125rem + 1.875vw, 2rem);
	--items-gap: calc(var(--items-margin) * 3) var(--items-margin);
    --items-min-size: 20rem;
		
    
	/* HEADER / LOGO */
    --logo-ratio: 59 / 15;
    --logo-height: clamp(1.5rem, 1.375rem + .625vw, 2rem);
    --padding-header: clamp(1rem, .75rem + 1.25vw, 2rem);
			
    
	/* PRIMITIVE COLORS */	
    --dark-color: #0b3b4b;
    --dark-rgb: 28, 36, 66;
    
    --light-color: #FFFFFF;
    --light-rgb: 252, 255, 255;
	
	--primary-color: light-dark(#f78da7, #f78da7);
    --primary-hover-color: light-dark(#d76b83, #d76b83);
    --primary-active-color: light-dark(#d75c79, #d75c79);
    --primary-rgb: 77, 169, 216;
	
	--secondary-color: light-dark(#d75c79, #d75c79);
    --secondary-hover-color: light-dark(#ce506a, #ce506a);
    --secondary-active-color: light-dark(#b23e5c, #b23e5c);
    --secondary-rgb: 77, 169, 216;
      
    
    /* ALERTS */
    --alert-danger-color: light-dark(#DF2935, #eb7a81);    
    --alert-danger-bg: light-dark(rgba(223, 41, 53, .1), rgba(235, 122, 129, .1));    
    --alert-danger-border: light-dark(rgba(223, 41, 53, .15), rgba(235, 122, 129, .15));    
    --alert-danger-outline: light-dark(rgba(223, 41, 53, .3), rgba(235, 122, 129, .3));
    
    --alert-warning-color: light-dark(#E8814A, #eda178);
    --alert-warning-bg: light-dark(rgba(232, 129, 74, .1), rgba(237, 161, 120, .1));    
    --alert-warning-border: light-dark(rgba(232, 129, 74, .15), rgba(237, 161, 120, .15));    
    --alert-warning-outline: light-dark(rgba(232, 129, 74, .3), rgba(237, 161, 120, .3));
    
    --alert-success-color: light-dark(#4FB477, #6be19a);  
    --alert-success-bg: light-dark(rgba(79, 180, 119, .1), rgba(107, 225, 154, .1));    
    --alert-success-border: light-dark(rgba(79, 180, 119, .15), rgba(107, 225, 154, .15));    
    --alert-success-outline: light-dark(rgba(79, 180, 119, .3), rgba(107, 225, 154, .3));
    
    --alert-info-color: light-dark(#3b82f6, #9ec1fa);  
    --alert-info-bg: light-dark(rgba(59, 130, 246, .1), rgba(158, 193, 250, .1));
    --alert-info-border: light-dark(rgba(59, 130, 246, .15), rgba(158, 193, 250, .15));
    --alert-info-outline: light-dark(rgba(59, 130, 246, .3), rgba(158, 193, 250, .3));
    
    
    /* ELEMENT COLORS */
	--background-color: light-dark(var(--light-color), var(--dark-color));
	--background-grey: light-dark(#F4F4F6, #333a55);
	--background-dark: light-dark(var(--dark-color), var(--light-color));
    
    --border-color: light-dark(rgba(var(--dark-rgb), .6), rgba(var(--light-rgb), .6));
    --border-hover-color: light-dark(rgba(var(--dark-rgb), .75), rgba(var(--light-rgb), .75));
    --border-focus-color: var(--primary-color);
    
	--title-color: light-dark(var(--dark-color), var(--light-color));
	--text-color: light-dark(rgba(var(--dark-rgb), .75), rgba(var(--light-rgb), .75));
	--strong-color: light-dark(rgba(var(--dark-rgb), .85), rgba(var(--light-rgb), .85));
	--placeholder-color: light-dark(rgba(var(--dark-rgb), .65), rgba(var(--light-rgb), .65));
	--muted-color: light-dark(rgba(var(--dark-rgb), .5), rgba(var(--light-rgb), .5));
	--muted-invert: light-dark(rgba(var(--light-rgb), .5), rgba(var(--dark-rgb), .5));
	--outline-color: light-dark(rgba(var(--dark-rgb), .3), rgba(var(--light-rgb), .3));
	--shadow-color: light-dark(rgba(var(--dark-rgb), .15), rgba(var(--light-rgb), .15));
		
	
	/* FONTS */
	--font-title: 'Inter', Arial, Helvetica, sans-serif;
	--font-text: 'Inter', Arial, Helvetica, Sans-serif;
	--letter-spacing: 0;
		
	
	/* FONT SIZES */
	--h1-font-size: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
	--h2-font-size: clamp(2rem, 1.625rem + 1.875vw, 3.5rem);
	--h3-font-size: clamp(1.5rem, 1.375rem + .625vw, 2rem);
	--h4-font-size: clamp(1.25rem, 1.1875rem + .3125vw, 1.5rem);
	--text-size-normal: 1rem;
    --text-size-small: .75rem;
		
	
	/* FONT WEIGHT */
	--text-weight-normal: 300;
    --text-weight-medium: 500;
    --text-weight-bold: 700;
	
	
	/* MARGES */
	--margin-h2: clamp(2rem, 1.75rem + 1.25vw, 3rem);
	--margin-h3: clamp(1.25rem, 1.0625rem + .9375vw, 2rem);
	--margin-h4: clamp(1rem, .875rem + .625vw, 1.5rem);
    --margin-section: clamp(5rem, 3.75rem + 6.25vw, 10rem);
    --margin-block: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    --padding-section: clamp(4rem, 3rem + 5vw, 8rem);
    --padding-block: clamp(3rem, 2.25rem + 3.75vw, 6rem);
    --columns-gap: 9%;
		
	
	/* VECTORS */
    
}

@media (prefers-contrast: more) {
    
    :root {
    
        /* ALERTS */   
        --alert-danger-bg: transparent;    
        --alert-danger-border: var(--alert-danger-color);    
        --alert-danger-outline: var(--alert-danger-color);

        --alert-warning-bg: transparent;    
        --alert-warning-border: var(--alert-warning-color);    
        --alert-warning-outline: var(--alert-warning-color);
 
        --alert-success-bg: transparent;    
        --alert-success-border: var(--alert-success-color);    
        --alert-success-outline: var(--alert-success-color);
 
        --alert-info-bg: transparent;
        --alert-info-border: var(--alert-info-color);
        --alert-info-outline: var(--alert-info-color);
        

        /* ELEMENT COLORS */
        --border-color: light-dark(var(--dark-color), var(--light-color));
        --border-hover-color: light-dark(var(--dark-color), var(--light-color));    
        --text-color: light-dark(var(--dark-color), var(--light-color));
        --strong-color: light-dark(var(--dark-color), var(--light-color));
        --placeholder-color: light-dark(var(--dark-color), var(--light-color));
        --muted-color: light-dark(var(--dark-color), var(--light-color));
        --muted-invert: light-dark(var(--light-color), var(--dark-color));
        --outline-color: light-dark(var(--dark-color), var(--light-color));
    }
}



/* ICONS SET */
.inodia-icons.play:before {
  content: "\e90a";
}
.inodia-icons.linkedin:before {
  content: "\e909";
}
.inodia-icons.instagram:before {
  content: "\e908";
}
.inodia-icons.facebook:before {
  content: "\e907";
}
.inodia-icons.checkmark:before {
  content: "\e906";
}
.inodia-icons.download:before {
  content: "\e905";
}
.inodia-icons.upload:before {
  content: "\e904";
}
.inodia-icons.arrow_left:before {
  content: "\e903";
}
.inodia-icons.arrow_right:before {
  content: "\e902";
}
.inodia-icons.arrow_up:before {
  content: "\e901";
}
.inodia-icons.arrow_down:before {
  content: "\e900";
}





/* ----------------------------------- */
/*
/* ----------- RESPONSIVE ------------ */
/*
/* ----------------------------------- */

/* 960px */
@media screen and (max-width: 60rem) {
	
	:root {
        --wrapper-size-mobile: 85%;
	    --items-gap: calc(var(--items-margin) * 4) var(--items-margin);
	}	
}


